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