Istnieją dodatkowe różnice między nimi oprócz składni.
Jak prawie każdy współczesny język programowania, JavaScript oferuje sposoby tworzenia funkcji umożliwiających ponowne wykorzystanie kodu. Dla tych, którzy nie znają języka, istnieją dwa różne sposoby deklarowania funkcji w JavaScript.
Pierwotnie tzw funkcjonować użyto słowa kluczowego, a później stworzono składnię strzałek. Chociaż różnią się dostępnością zakresu, zarówno słowo kluczowe funkcji, jak i składnia strzałki dają podobne wyniki.
Brak możliwości rozróżnienia między nimi może powodować problemy i prowadzić do nieprawidłowego użycia. Współczesny programista JS musi zrozumieć, w jaki sposób każda deklaracja funkcji wpływa na zakres i widoczność.
Jakie są funkcje strzałek JavaScript?
Funkcje strzałek w JavaScript są alternatywnym sposobem definiowania funkcji, które nie używają wartości domyślnej funkcjonować słowo kluczowe:
funkcjonowaćlogWiadomość(wiadomość) {
konsola.log (wiadomość);
}konst logMessage = (wiadomość) => {
konsola.log (wiadomość);
}
konst logMessage = wiadomość =>konsola.log (wiadomość);
Powyżej możesz zobaczyć tę samą wiadomość napisaną na trzy różne sposoby. Pierwsza używa zwykłej metody deklaracji funkcji. Następne dwa pokazują dwa sposoby użycia funkcji strzałek w ES6.
JavaScript po raz pierwszy przyjął składnię funkcji strzałki wraz z wydaniem standardów ECMAScript 2015. Funkcje strzałek oferowały czysty i zwięzły sposób szybkiego tworzenia funkcji oraz interesujące rozwiązanie kilku długotrwałych problemów z zakresem w JavaScript.
Te funkcje szybko sprawiły, że funkcje strzałek stały się hitem wśród wielu programistów. Programiści badający współczesną bazę kodu JavaScript mogą równie dobrze znaleźć funkcje strzałek, jak zwykłe funkcje.
Czym różnią się funkcje strzałek od zwykłych funkcji w JavaScript?
Na pierwszy rzut oka funkcje strzałek nie różnią się zbytnio od funkcji zadeklarowanych za pomocą słowa kluczowego function. Poza składnią oba hermetyzują zestaw akcji wielokrotnego użytku, które można wywołać z innego miejsca w kodzie.
Pomimo podobieństw między nimi istnieją jednak pewne różnice, o których programiści muszą wiedzieć.
Różnica w zakresie
Ilekroć zwykła funkcja jest deklarowana w JavaScript, to funkcja działa jako zamknięcie, które tworzy własny zakres. Może to powodować problemy podczas korzystania z niektórych wyspecjalizowanych funkcji, takich jak ustawiony limit czasu I ustaw Interwał.
Przed ES6 istniała znaczna liczba obejść, które podnosiły elementy na wyższy poziom zakresu do wykorzystania w wywołaniach zwrotnych. Te hacki działały, ale często były trudne do zrozumienia i mogły powodować problemy z nadpisywaniem niektórych zmiennych.
Funkcje strzałek rozwiązały oba problemy w prosty i elegancki sposób. Gdy funkcja strzałki jest używana jako część wywołania zwrotnego, ma dostęp do tego samego zakresu, co funkcja, z której została wywołana.
Pozwoliło to na użycie funkcji jako wywołań zwrotnych bez utraty dostępu do kontekstu, w którym wywołano oryginalne zdarzenie. Jako prosty test pokazujący tę zasadę w działaniu, możesz skonfigurować funkcję opóźnionego wysyłania wiadomości, taką jak ta poniżej:
funkcjonowaćopóźniona wiadomość(wiadomość, opóźnienie) {
setTimeout(funkcjonować(wiadomość) {
konsola.log (wiadomość);
}, opóźnienie);}
opóźniona wiadomość("Witaj świecie", 1000);
Funkcja jest prosta, akceptująca wiadomość I opóźnienie w milisekundach. Po przekroczeniu opóźnienia powinien zarejestrować komunikat w konsoli. Jednak po wykonaniu kodu nieokreślony zostanie zalogowany do konsoli zamiast komunikatu, który został przekazany.
Gdy funkcja wywołania zwrotnego jest wykonywana, zmienia się zakres i oryginalna wiadomość nie jest już dostępna. Użycie komunikatu z wewnątrz domknięcia wymaga podniesienia komunikatu do zmiennej globalnej, co może spowodować jego nadpisanie przed wywołaniem zwrotnym.
Funkcja strzałki jest właściwym rozwiązaniem tego problemu. Jeśli zastąpisz pierwszy argument for ustawiony limit czasu, zakres może zostać zachowany, a funkcja będzie miała dostęp do przekazanej wiadomości opóźniona wiadomość.
funkcjonowaćopóźniona wiadomość(wiadomość, opóźnienie) {
setTimeout(() => {
konsola.log (wiadomość);
}, opóźnienie);}
opóźniona wiadomość("Witaj świecie", 1000);
Teraz, po wykonaniu, opóźniona wiadomość funkcja zarejestruje wiadomość. Ponadto umożliwia to ustawianie wielu komunikatów w kolejce z różnymi opóźnieniami i wszystkie nadal będą pojawiać się we właściwym czasie.
Wynika to z faktu, że za każdym razem opóźniona wiadomość jest używany, generuje własny zakres z własną kopią wewnętrznej funkcji strzałki.
Czytelność kodu
Chociaż funkcje strzałek są przydatne jako wywołania zwrotne, są również używane do utrzymania czystości i zwięzłości kodu. W powyższej sekcji możesz zobaczyć, że użycie funkcji strzałki sprawia, że jest oczywiste, co się stanie, gdy opóźniona wiadomość wywoływana jest funkcja.
Gdy funkcje stają się coraz bardziej złożone, niewielka przejrzystość może sprawić, że kod będzie znacznie bardziej czytelny. Podczas tworzenia obiektów może to uprościć kod podczas dodawania krótkich funkcji:
klasalada{
_liczba = 0;
przyrost = () => {
Ten._liczba += 1;
}
spadek = () => {
Ten._liczba -= 1;
}
liczyć = () => {
powrótTen._liczyć;
}
}
pozwalać ct = nowy lada();
Rola w programowaniu obiektowym
Chociaż funkcje strzałek w JavaScript są integralną częścią programowania funkcjonalnego, mają również swoje miejsce programowanie obiektowe. Funkcji strzałkowych można używać w deklaracjach klas:
klasapozycja zamówienia{
_LineItemID = 0;
_Produkt = {};
_Ilość = 1;konstruktor(produkt) {
Ten._LineItemID = crypto.randomUUID();
Ten._Produkt = produkt
}
zmieńLineItemIlość = (nowyIlość) => {
Ten._Ilość = nowaIlość;
}
}
Użycie funkcji strzałki do zadeklarowania metod w deklaracji klasy nie zmienia zachowania funkcji w klasie. Jednak poza klasą ujawnia funkcję, umożliwiając jej użycie przez inne klasy.
Nie można uzyskać dostępu do zwykłych funkcji poza deklaracją klasy bez ich wywołania. Oznacza to, że podczas gdy inne deklaracje klas mogą dziedziczyć te funkcje, nie można uzyskać do nich bezpośredniego dostępu w celu tworzenia innych klas.
Kiedy należy używać funkcji strzałek JavaScript?
Funkcje strzałek JavaScript to niezwykle potężna funkcja, która daje programistom znacznie większą kontrolę nad zakresem, do którego funkcja ma dostęp. Wiedza o tym, kiedy wywołanie zwrotne powinno mieć dostęp do zakresu swojego rodzica, a kiedy nie, może pomóc programiście określić, jakiego typu deklaracji użyć.
Funkcje strzałek zapewniają programistom jasny i zwięzły sposób pisania wywołań zwrotnych bez ujawniania części zakresu, które powinny być ukryte. Pozwalają również na tworzenie czystych i prostych kompozycji, dodatkowo umożliwiając funkcjonalne programowanie w JavaScript.
Programiści JS muszą być świadomi różnic między tymi dwiema składniami i pamiętać o tym, która składnia jest właściwa podczas deklarowania ich funkcji.