16 KiB

Raw Permalink Blame History Unescape Escape

Основи на JavaScript: Методи и функции

Скетч от Tomomi Imura

Предварителен тест

Когато мислим за писане на код, винаги трябва да се стремим кодът ни да бъде четим. Макар това да звучи противоречиво, кодът се чете много повече пъти, отколкото се пише. Един от основните инструменти в арсенала на разработчика за създаване на поддържаем код е функцията.

🎥 Кликнете върху изображението по-горе за видео за методи и функции.

Можете да вземете този урок на Microsoft Learn!

Функции

В основата си функцията е блок от код, който можем да изпълним при поискване. Това е идеално за ситуации, в които трябва да извършим една и съща задача многократно; вместо да дублираме логиката на различни места (което би затруднило актуализацията, когато дойде време), можем да я централизиране на едно място и да я извикваме, когато е необходимо - дори можете да извиквате функции от други функции!

Също толкова важно е възможността да дадем име на функцията. Макар това да изглежда тривиално, името предоставя бърз начин за документиране на част от кода. Можете да го сравните с етикет на бутон. Ако кликна върху бутон с надпис "Отмени таймера", знам, че той ще спре часовника.

Създаване и извикване на функция

Синтаксисът за функция изглежда по следния начин:

function nameOfFunction() { // function definition
 // function definition/body
}

Ако искам да създам функция за показване на поздрав, тя може да изглежда така:

function displayGreeting() {
  console.log('Hello, world!');
}

Когато искаме да извикаме (или изпълним) нашата функция, използваме името на функцията, последвано от (). Струва си да отбележим, че функцията ни може да бъде дефинирана преди или след като решим да я извикаме; компилаторът на JavaScript ще я намери вместо нас.

// calling our function
displayGreeting();

NOTE: Съществува специален тип функция, известен като метод, който вече сте използвали! Всъщност, видяхме това в нашия пример по-горе, когато използвахме console.log. Това, което прави метода различен от функцията, е, че методът е прикрепен към обект (console в нашия пример), докато функцията е свободно плаваща. Ще чуете много разработчици да използват тези термини взаимозаменяемо.

Най-добри практики за функции

Има няколко добри практики, които трябва да имате предвид при създаването на функции:

Както винаги, използвайте описателни имена, за да знаете какво ще прави функцията
Използвайте camelCasing, за да комбинирате думи
Дръжте функциите си фокусирани върху конкретна задача

Предаване на информация на функция

За да направите функцията по-универсална, често ще искате да предавате информация на нея. Ако разгледаме нашия пример displayGreeting по-горе, той ще показва само Hello, world!. Не е най-полезната функция, която бихме могли да създадем. Ако искаме да я направим малко по-гъвкава, например да позволим на някого да посочи името на човека, който да поздравим, можем да добавим параметър. Параметърът (понякога наричан и аргумент) е допълнителна информация, изпратена на функцията.

Параметрите се изброяват в частта за дефиниция в скоби и са разделени със запетаи, както следва:

function name(param, param2, param3) {

}

Можем да актуализираме нашия displayGreeting, за да приема име и да го показва.

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Когато искаме да извикаме нашата функция и да предадем параметъра, го посочваме в скобите.

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

Стойности по подразбиране

Можем да направим функцията си още по-гъвкава, като добавим повече параметри. Но какво, ако не искаме да изискваме всяка стойност да бъде посочена? В съответствие с нашия пример за поздрав, можем да оставим името като задължително (трябва да знаем кого поздравяваме), но искаме да позволим поздравът да бъде персонализиран, ако желаем. Ако някой не иска да го персонализира, предоставяме стойност по подразбиране. За да зададем стойност по подразбиране на параметър, го задаваме по същия начин, както задаваме стойност на променлива - parameterName = 'defaultValue'. За да видите пълен пример:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Когато извикваме функцията, можем да решим дали искаме да зададем стойност за salutation.

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Връщане на стойности

Досега функцията, която създадохме, винаги ще извежда резултата в конзолата. Понякога това може да е точно това, което търсим, особено когато създаваме функции, които ще извикват други услуги. Но какво, ако искам да създам помощна функция за извършване на изчисление и да върна стойността обратно, за да мога да я използвам другаде?

Можем да направим това, като използваме връщана стойност. Връщаната стойност се връща от функцията и може да бъде съхранена в променлива, точно както бихме могли да съхраним буквална стойност като низ или число.

Ако функцията връща нещо, тогава се използва ключовата дума return. Ключовата дума return очаква стойност или референция на това, което се връща, както следва:

return myVariable;

Можем да създадем функция за създаване на поздравително съобщение и да върнем стойността обратно на извикващия.

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Когато извикваме тази функция, ще съхраним стойността в променлива. Това е много подобно на начина, по който бихме задали променлива на статична стойност (като const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Функции като параметри за функции

С напредването на вашата програмистка кариера ще срещнете функции, които приемат функции като параметри. Този интересен трик често се използва, когато не знаем кога нещо ще се случи или завърши, но знаем, че трябва да извършим операция в отговор.

Като пример, разгледайте setTimeout, който започва таймер и ще изпълни код, когато завърши. Трябва да му кажем какъв код искаме да изпълни. Звучи като идеална работа за функция!

Ако изпълните кода по-долу, след 3 секунди ще видите съобщението 3 секунди изминаха.

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Анонимни функции

Нека разгледаме още веднъж това, което създадохме. Създаваме функция с име, която ще бъде използвана само веднъж. С усложняването на нашето приложение можем да видим как създаваме много функции, които ще бъдат извикани само веднъж. Това не е идеално. Оказва се, че не винаги трябва да предоставяме име!

Когато предаваме функция като параметър, можем да пропуснем създаването ѝ предварително и вместо това да я изградим като част от параметъра. Използваме същата ключова дума function, но вместо това я изграждаме като параметър.

Нека пренапишем кода по-горе, за да използваме анонимна функция:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Ако изпълните новия ни код, ще забележите, че получаваме същите резултати. Създадохме функция, но не трябваше да ѝ даваме име!

Функции със стрелки

Един от съкратените начини, често срещан в много програмни езици (включително JavaScript), е възможността да използваме така наречената стрелка или дебела стрелка функция. Тя използва специален индикатор =>, който изглежда като стрелка - оттук и името! С използването на => можем да пропуснем ключовата дума function.

Нека пренапишем кода още веднъж, за да използваме функция със стрелка:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Кога да използваме всяка стратегия

Вече видяхте, че имаме три начина да предадем функция като параметър и може би се чудите кога да използвате всеки от тях. Ако знаете, че ще използвате функцията повече от веднъж, създайте я по нормалния начин. Ако ще я използвате само за едно място, обикновено е най-добре да използвате анонимна функция. Дали ще използвате функция със стрелка или по-традиционния синтаксис с function зависи от вас, но ще забележите, че повечето съвременни разработчици предпочитат =>.

🚀 Предизвикателство

Можете ли да обясните с едно изречение разликата между функции и методи? Опитайте!

Тест след лекцията

Преглед и самостоятелно обучение

Струва си да прочетете малко повече за функциите със стрелки, тъй като те все повече се използват в кодовите бази. Практикувайте писането на функция, а след това я пренапишете с този синтаксис.

Задание

Забавление с функции

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

16 KiB Raw Permalink Blame History Unescape Escape