Защо трябва да внимавате с използването на функции със стрелки в JavaScript

Синтаксисът на функцията стрелка пристигна с пускането на ECMAScript 2015, известен също като ES6. Днес функциите със стрелки са се превърнали в любимата функция на много JavaScript програмисти. Тази любов към функциите със стрелки се дължи на краткия синтаксис и ясното поведение на ключовата дума "this".

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

1. Трябва да дефинирате функция със стрелка, преди да я използвате

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

Разгледайте например следния JavaScript код:

конст двойни числа = (числа) { 
 numbers.map(н => н * 2)
}
конст halveNumbers = (числа) { 
 numbers.map(н => н / 2)
}
конст sumNumbers = (числа) { 
 numbers.reduce((сума, n) => { 
връщане сума + n; 
 }, 0)
}
конст числа = [1, 20, 300, 700, 1500]
конст удвоени = двойни числа (числа)
конзола.log (halveNumbers (удвоени))
конзола.log (сумаЧисла (числа))

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

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

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

2. Функциите на стрелките може да са объркващи за някои хора

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

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

Сравнете двете функции по-долу:

конст половинЧисла = (числа) => {
връщане numbers.map(н => н / 2)
}
функцияразполовявамЧисла(числа) { 
връщане numbers.map(н => н / 2)
}

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

3. Не можете да използвате функции със стрелки като методи

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

Разгледайте следния обект:

конст човек = {
 първо име: "Кайл",
 фамилия: "Готвач",
 printName: () => {
конзола.log(`${това.първо име}``${това.фамилия}` )
 }
}
person.printName()

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

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

конст човек = {
 първо име: "Кайл",
 фамилия: "Готвач",
 printName: функция() {
конзола.log(`${това.първо име}``${това.фамилия}` )
 }
}
person.printName()

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

Кога да използвате функции със стрелки

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

Сравнете тези две и решете кое е по-лесно:

функцияразполовявамЧисла(числа) {
връщане numbers.map(н => н / 2)
}
функцияразполовявамЧисла(числа) {
връщане numbers.map(функция(н) {
връщане н / 2
 })
}

И двата случая предават функция за обратно извикване към метода map(). Но първото обратно извикване е функция със стрелка, докато второто е пълна функция. Можете да видите как първата функция заема по-малко редове код от втората функция: три срещу. пет.

Другото време за използване на функции със стрелки е винаги, когато искате да се справите с конкретен "този" синтаксис. Обектът "този" ще се промени в зависимост от това дали използвате обикновени функции или функции със стрелки за определени неща.

Следният кодов блок регистрира два слушателя на събития "щракване" върху обекта на документа. Първият екземпляр използва обикновена функция като обратно извикване, докато вторият използва функция със стрелка. Вътре в двете обратни извиквания кодът регистрира обекта за изпълнение (this) и целта на събитието:

документ.addEventListener("клик", функция(д) {
конзола.log("ФУНКЦИЯ", това, e.target)
})
документ.addEventListener("клик", (e) => {
конзола.log("СТРЕЛКА", това, e.target)
})

Ако стартирате този скрипт, ще забележите, че „това“ препратка е различно и за двете. За обикновената функция това свойство препраща към документа, който е същият като e.target Имот. Но за функцията стрелка, това препраща към обекта прозорец.

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

Научете повече за функциите със стрелки срещу обикновените функции

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