Функцията е част от код за многократна употреба, която се изпълнява, когато я извикате. Функциите ви позволяват да използвате повторно код, което го прави по-модулен и по-лесен за поддръжка.
Има няколко начина за създаване на функции в JavaScript. Тук ще научите различните начини за създаване на функции и как да ги използвате.
Декларации на функции: Простият начин
Един от начините да създавате функции в JavaScript е чрез декларации на функции. Декларацията на функция е функция в JavaScript, която следва синтаксиса по-долу.
функцияиме на функция(параметри) {
// кодът отива тук...
връщане„Това е декларация на функция“;
}
Компонентите на кодовия блок по-горе включват:
- The функция ключова дума: Тази ключова дума декларира функция.
- име на функция: Това е името на функцията. На практика той трябва да бъде възможно най-описателен и смислен, като посочва какво прави функцията.
- параметри: Това представлява параметрите на функцията. Параметрите са незадължителен списък от променливи, които можете да предадете на функция, когато я извикате.
- Тялото на функцията: Това съдържа кода, който функцията ще изпълни, когато я извикате. Оградено е с къдрави скоби {} и може да съдържа всеки валиден JavaScript код.
- The връщане оператор: Този оператор спира изпълнението на функция и връща указаната стойност. В горния случай извикването на функцията ще върне низа „Това е декларация на функция“.
Например, декларацията на функцията по-долу приема три числа като параметри и връща тяхната сума.
функцияaddThreeNumbers(a, b, c) {
връщане a + b + c;
}
За да извикате декларация на функция в JavaScript, напишете името на функцията, последвано от набор от скоби (). Ако функцията приема някакви параметри, предайте ги като аргументи в скобите.
Например:
addThreeNumbers(1, 2, 3) // 6
Кодовият блок по-горе извиква addThreeNumber функции и предава 1, 2 и 3 като аргументи на функцията. Ако стартирате този код, той ще върне стойността 6.
JavaScript подемници декларации на функции, което означава, че можете да ги извикате, преди да ги дефинирате.
Например:
isHoisted(); // Функцията е повдигната
функцияisHoisted() {
конзола.log(„Функцията е повишена“);
връщаневярно;
}
Както е показано в кодовия блок по-горе, извикване isHoisted преди дефинирането няма да изведе грешка.
Функционални изрази: Функции като стойности
В JavaScript можете да дефинирате функция като израз. След това можете да присвоите стойността на функцията на променлива или да я използвате като аргумент на друга функция.
Те са известни също като анонимни функции, тъй като нямат имена и можете да ги извикате само от променливата, към която сте ги присвоили.
По-долу е синтаксисът за израз на функция:
конст име на функция = функция () {
връщане"Функционален израз";
};
За да извикате израз на функция в JavaScript, напишете името на променливата, което сте присвоили на функцията, последвано от набор от скоби (). Ако функцията приема някакви параметри, предайте ги като аргументи в скобите.
Например:
име на функция(); // Функционален израз
Функционалните изрази са удобни при създаване на функции, които се изпълняват в други функции. Типичните примери включват манипулатори на събития и техните обратни извиквания.
Например:
button.addEventListener("клик", функция (събитие) {
конзола.log(„Щракнахте върху бутон!“);
});
Примерът по-горе използва израз на функция, който приема an събитие аргумент като обратно извикване към addEventListener функция. Не е необходимо да извиквате функцията изрично, когато използвате израз на функция като обратно извикване. Той автоматично се извиква от своята родителска функция.
В горния случай, когато слушателят на събитие получи a щракнете събитие, то извиква функцията за обратно извикване и предава събитие обект като аргумент.
За разлика от декларациите на функции, изразите на функции не се издигат, така че не можете да ги извикате, преди да ги дефинирате. Опитът за достъп до функционален израз, преди да го дефинирате, ще доведе до a ReferenceError.
Например:
isHoisted(); // ReferenceError: Няма достъп до „isHoisted“ преди инициализация
конст isHoisted = функция () {
конзола.log(„Функцията е повишена“);
};
Функции на стрелките: компактни и ограничени
ES6 въведе стенограма за писане на анонимни функции в JavaScript, наречена стрелкова функция. Те имат кратък синтаксис, който може да направи кода ви по-четлив, особено когато работите с кратки, едноредови функции.
За разлика от други методи за създаване на функции, функциите със стрелки не изискват функция ключова дума. Изразът на функция със стрелка се състои от три части:
- Двойка скоби (()), съдържащ параметрите. Можете да пропуснете скобите, ако функцията има само един параметър.
- Стрела (=>), който се състои от знак за равенство (=) и знак по-голямо от (>).
- Чифт фигурни скоби, съдържащи тялото на функцията. Можете да пропуснете фигурните скоби, ако функцията се състои от един израз.
Например:
// Единичен параметър, имплицитно връщане
конст име на функция = параметър =>конзола.log(„Функция стрелка с един параметър“)
// Множество параметри, изрично връщане
конст име на функция = (параметър_1, параметър_2) => {
връщане„Функция стрелка с множество параметри“
};
Когато пропуснете фигурните скоби, функцията стрелка имплицитно връща единствения израз, така че няма нужда от връщане ключова дума. От друга страна, ако не пропуснете фигурните скоби, трябва изрично да върнете стойност, като използвате връщане ключова дума.
Функциите на стрелките също имат различни това обвързване в сравнение с обикновените функции. В редовните функции стойността на това зависи от това как извиквате функцията. Във функция със стрелка, това винаги е обвързано с това стойност на заобикалящия обхват.
Например:
конст foo = {
име: "Дейв",
поздравявам: функция () {
setTimeout(() => {
конзола.log(`Здравейте, казвам се ${това.name}`);
}, 1000);
},
};
foo.greet(); // Регистрира „Здравейте, казвам се Дейв“ след 1 секунда
В примера по-горе функцията стрелка вътре в поздравявам метод има достъп до това.име, въпреки че setTimeout функцията го извиква. Една нормална функция би имала своето това обвързани с глобалния обект.
Както подсказва името, незабавно извикана функция (IIFE) е функция, която се изпълнява веднага щом бъде дефинирана.
Ето структурата на IIFE:
(функция () {
// код тук
})();(() => {
// код тук
})();
(функция (параметър_1, параметър_2) {
конзола.log (param_1 * param_2);
})(2, 3);
IIFE се състои от функционален израз, обвит в двойка скоби. Следвайте го с чифт скоби извън заграждението, за да извикате функцията.
Можете да използвате IIFE, за да създавате обхвати, да скривате подробности за изпълнението и да споделяте данни между множество скриптове. Някога са били използвани като модулна система в JavaScript.
Създаване на функция по много различни начини
Разбирането как да създавате функции в JavaScript е от решаващо значение. Това важи за основна функция, която извършва просто изчисление, или за сложна функция, която взаимодейства с други части на вашия код.
Можете да използвате техниките, обсъдени по-горе, за изграждане на функции в JavaScript и структуриране и организиране на вашия код. Изберете подхода, който най-добре отговаря на вашите изисквания, тъй като всеки има различни предимства и приложения.
