Dlaczego należy zachować ostrożność podczas używania funkcji strzałek w JavaScript

Składnia funkcji strzałek pojawiła się wraz z wydaniem ECMAScript 2015, znanego również jako ES6. Obecnie funkcje strzałek stały się ulubioną funkcją wielu programistów JavaScript. To zamiłowanie do funkcji strzałek wynika ze zwięzłej składni i prostego zachowania słowa kluczowego „this”.

Ale funkcje strzałek mają pewne wady. Poznaj kluczowe różnice między funkcjami strzałek a zwykłymi funkcjami i dowiedz się, dlaczego w większości przypadków lepiej jest trzymać się zwykłych funkcji.

1. Musisz zdefiniować funkcję strzałki przed jej użyciem

Nie można podnieść funkcji strzałki. Domyślne reguły podnoszenia JavaScriptu umożliwiają wywołanie funkcji przed jej zdefiniowaniem, ale nie dotyczy to funkcji strzałek. Jeśli masz plik JavaScript z funkcjami, oznaczałoby to, że cały ważny kod będzie znajdował się na dole pliku.

Rozważmy na przykład następujący kod JavaScript:

konst podwójne liczby = (liczby) { 
 numery. mapa (N => N * 2)
}
konst halfNumbers = (liczby) { 
 numery. mapa (N => N / 2)
}
konst sumLiczby = (liczby) { 
 liczby.redukuj((suma, rz) => { 
powrót suma + n; 
 }, 0)
}
konst liczby = [1, 20, 300, 700, 1500]
konst podwojone = podwójneLiczby (liczby)
konsola.log (halveNumbers (podwojone))
konsola.log (sumNumbers (liczby))

W powyższym bloku kodu ważny kod znajduje się na dole. Wszystkie funkcje pomocnicze są zdefiniowane przed punktem wykonania. Mieć utwórz swoje funkcje JavaScript na górze pliku może być niewygodne, ponieważ trzeba będzie przewinąć w dół, aby zobaczyć rzeczywisty kod, który działa.

Jeśli przeniosłeś funkcje pomocnicze na dół, a rzeczywisty kod na górę, otrzymasz błąd odniesienia. Środowisko wykonawcze traktuje funkcję jako zmienną. W związku z tym należy go najpierw zdefiniować przed uzyskaniem do niego dostępu lub wywołaniem go. Ale jeśli przekonwertowałeś wszystkie funkcje strzałek na zwykłe funkcje (z rozszerzeniem funkcjonować słowo kluczowe), wtedy twój kod będzie działał poprawnie. Jednocześnie ważny kod pozostaje na górze, gdzie można go zlokalizować.

Jest to jeden z największych problemów związanych z używaniem funkcji strzałek. Nie wykazują żadnych zachowań związanych z hostingiem. Innymi słowy, musisz je zdefiniować przed faktycznym miejscem ich użycia. Z drugiej strony możesz podnosić zwykłe funkcje.

2. Funkcje strzałek mogą być mylące dla niektórych osób

Innym powodem używania zwykłych funkcji zamiast funkcji strzałek jest czytelność. Zwykłe funkcje są łatwiejsze do odczytania, ponieważ jawnie używają metody funkcjonować słowo kluczowe. To słowo kluczowe wskazuje, że dany kod jest funkcją.

Z drugiej strony przypisujesz funkcje strzałek do zmiennych. Jako nowicjuszowi może to wprowadzić w błąd i pomyśleć, że kod jest zmienną, a nie funkcją.

Porównaj dwie poniższe funkcje:

konst połowaLiczby = (liczby) => {
powrót numery. mapa (N => N / 2)
}
funkcjonowaćpołowaLiczby(liczby) { 
powrót numery. mapa (N => N / 2)
}

Na pierwszy rzut oka można łatwo stwierdzić, że drugi fragment kodu to funkcja. Składnia wyjaśnia, że ​​kod jest funkcją. Jednak pierwszy z nich jest niejednoznaczny — możesz niełatwo stwierdzić, czy jest to zmienna, czy funkcja.

3. Nie możesz używać funkcji strzałek jako metod

Gdy używasz funkcji strzałki, Ten Słowo kluczowe odpowiada temu, co jest na zewnątrz rzeczy, w której jesteśmy. W większości przypadków jest to obiekt okna.

Rozważ następujący obiekt:

konst osoba = {
 imię: "Kyle",
 nazwisko: "Kucharz",
 Nazwa wydruku: () => {
konsola.dziennik(`${Ten.imię}``${Ten.nazwisko}` )
 }
}
person.printName()

Jeśli uruchomisz kod, zauważysz, że przeglądarka drukuje nieokreślony zarówno dla imienia, jak i nazwiska. Ponieważ używamy funkcji strzałki, Ten słowo kluczowe odpowiada obiektowi okna. Również nie ma imię Lub nazwisko określona tam właściwość.

Aby rozwiązać ten problem, musisz zamiast tego użyć zwykłej funkcji:

konst osoba = {
 imię: "Kyle",
 nazwisko: "Kucharz",
 Nazwa wydruku: funkcjonować() {
konsola.dziennik(`${Ten.imię}``${Ten.nazwisko}` )
 }
}
person.printName()

To będzie działać dobrze, ponieważ Ten odnosi się do osoba obiekt. Jeśli zamierzasz często zajmować się tego rodzaju programowaniem obiektowym, musisz upewnić się, że używasz zwykłych funkcji. Funkcje strzałek nie będą działać.

Kiedy używać funkcji strzałek

Używaj funkcji strzałek głównie w miejscach, w których potrzebujesz funkcji anonimowej. Przykładem takiego scenariusza jest zajmowanie się funkcją wywołania zwrotnego. Lepiej jest używać funkcji strzałki podczas pisania wywołania zwrotnego, ponieważ składnia jest o wiele prostsza niż pisanie pełnej funkcji.

Porównaj te dwa i zdecyduj, który jest prostszy:

funkcjonowaćpołowaLiczby(liczby) {
powrót numery. mapa (N => N / 2)
}
funkcjonowaćpołowaLiczby(liczby) {
powrót numery. mapa (funkcjonować(N) {
powrót N / 2
 })
}

Oba przypadki przekazują funkcję wywołania zwrotnego do metody map(). Ale pierwsze wywołanie zwrotne jest funkcją strzałki, podczas gdy drugie jest pełną funkcją. Możesz zobaczyć, jak pierwsza funkcja zajmuje mniej wierszy kodu niż druga funkcja: trzy vs. pięć.

Innym razem, aby użyć funkcji strzałek, gdy chcesz zająć się określoną składnią „ta”. Obiekt „ten” zmieni się w zależności od tego, czy używasz zwykłych funkcji, czy funkcji strzałek do określonych rzeczy.

Poniższy blok kodu rejestruje dwa detektory zdarzeń „kliknięcia” w obiekcie dokumentu. Pierwsza instancja używa zwykłej funkcji jako wywołania zwrotnego, podczas gdy druga używa funkcji strzałki. Wewnątrz obu wywołań zwrotnych kod rejestruje obiekt wykonania (this) i cel zdarzenia:

dokument.addEventListener("Kliknij", funkcjonować(mi) {
konsola.dziennik("FUNKCJONOWAĆ", Ten, e. cel)
})
dokument.addEventListener("Kliknij", (e) => {
konsola.dziennik("STRZAŁKA", Ten, e. cel)
})

Gdybyś uruchomił ten skrypt, zauważyłbyś, że „to” odwołanie jest różne dla obu. W przypadku zwykłej funkcji ta właściwość odwołuje się do dokumentu, który jest taki sam jak właściwość e.cel nieruchomość. Ale w przypadku funkcji strzałki odnosi się to do obiektu okna.

Kiedy użyjesz zwykłej funkcji jako wywołania zwrotnego, będzie to odnosić się do elementu, w którym wyzwalamy zdarzenie. Ale kiedy używasz funkcji strzałki, to słowo kluczowe domyślnie przyjmuje obiekt okna.

Dowiedz się więcej o funkcjach strzałek a zwykłych funkcjach

Istnieje kilka innych subtelnych różnic między zwykłymi funkcjami a funkcjami strzałek. Opanowanie obu rodzajów funkcji jest podstawą opanowania języka JavaScript. Dowiedz się, kiedy używać jednego, a kiedy drugiego; wtedy zrozumiesz implikacje używania zwykłej funkcji lub funkcji strzałki w JavaScript.