6 różnic między funkcjami strzałek a zwykłymi funkcjami w JavaScript

Funkcje są istotną częścią JavaScript, której potrzebujesz do pisania kodu wielokrotnego użytku. Dwa główne typy funkcji to funkcje regularne i strzałkowe, i istnieje wiele sposobów ich definiowania.

Mimo że spełniają podobne potrzeby, mają kilka krytycznych różnic, które mogą zasadniczo wpłynąć na sposób ich wykorzystania w kodzie. Dowiedz się wszystkiego o kilku różnicach między funkcjami strzałek a zwykłymi funkcjami.

1. Różnice w składni

Składnia wybrana podczas tworzenia funkcji JavaScript ma duży wpływ na łatwość czytania i rozumienia kodu. Składnia funkcji regularnych i strzałkowych znacznie się różni, co wpływa na sposób ich pisania i używania.

Funkcje strzałek JavaScript użyj mniejszej struktury językowej, która jest bardziej zrozumiała. Można ich używać do tworzenia funkcji poprzez łączenie ich w pojedyncze wyrażenie lub instrukcję.

konst dodaj = (a, b) => a + b;

W tym przykładzie dodać funkcja akceptuje dwa wejścia, A I Bi zwraca ich sumę. The => znak definiuje to jako funkcję strzałki.

Z drugiej strony zdefiniowanie funkcji regularnej wymaga użycia metody funkcjonować słowo kluczowe, z bardziej szczegółową składnią, jak pokazano w tym przykładzie:

funkcjonowaćdodać(a, b) {
powrót a + b;
}

W tym przykładzie funkcjonować Słowo kluczowe definiuje zwykłą funkcję, która również używa nawiasów klamrowych i powrót oświadczenie.

Funkcje regularne są bardziej przydatne w przypadku złożonej składni wymagającej wielu instrukcji lub wyrażeń. Natomiast funkcje strzałkowe używają bardziej zwięzłej składni, dzięki czemu kod jest łatwiejszy do odczytania i zrozumienia.

2. Różnice w zakresie

Termin „zakres” opisuje, w jaki sposób dostępne są wewnętrzne zmienne i funkcje funkcji. W JavaScript definiujesz i uzyskujesz dostęp do zmiennych i funkcji w całym kodzie za pomocą określania zakresu. Ich odrębny określanie zakresu może znacząco wpłynąć na sposób pisania i używania języka JavaScript strzałki i funkcje regularne.

W ustalaniu zakresu, w jaki sposób funkcje strzałek obsługują Ten słowo kluczowe znacznie różni się od tego, jak działają normalne funkcje. Funkcje regularne definiują Ten sami słowo kluczowe; w związku z tym może się zmieniać w zależności od kontekstu, w którym wywołujesz funkcję.

Z drugiej strony, ponieważ nie określają Ten słowo kluczowe, funkcje strzałek używają tego samego Ten jako otaczający je zakres statyczny.

Aby zobaczyć różnicę, sprawdź poniższy przykład. Powiedzmy, że masz osoba obiekt z A nazwa właściwość i metodę o nazwie powiedzImię() który rejestruje imię i nazwisko osoby przy użyciu zwykłej funkcji:

konst osoba = {
 nazwa: 'Jan,'
 powiedzImię: funkcjonować() {
konsola.dziennik(Ten.nazwa);
 }
};
osoba.powiedzImię(); // rejestruje „Jan”

Tutaj zwykła funkcja sayName() jest metodą obiektu person i metody Ten słowo kluczowe wewnątrz tej funkcji odnosi się do obiektu tej osoby.

Spróbujmy teraz tego samego z funkcją strzałki:

konst osoba = {
 nazwa: 'Jan',
 powiedzImię: () => {
konsola.dziennik(Ten.nazwa);
 }
};
osoba.powiedzImię(); // dzienniki niezdefiniowane

Ponieważ funkcja strzałki używana w powiedzImię() metoda nie definiuje własnej Ten słowo kluczowe, używa Ten zakresu statycznego, który go otacza. W tym przypadku jest to globalny zasięg instancji.

W rezultacie, kiedy dzwonisz osoba.powiedzImię(), dostajesz nieokreślony zamiast "Jan." Może to znacząco wpłynąć na sposób pisania i używania funkcji w kodzie.

3. Przypadki użycia i najlepsze praktyki

Zwykłe funkcje lepiej nadają się do funkcji, które wymagają własnych Ten słowo kluczowe, takie jak metody w obiekcie.

Funkcje strzałek są lepiej dostosowane do programowanie funkcyjne i wywołań zwrotnych, które nie wymagają Ten słowo kluczowe.

4. Różnice w powiązaniach funkcji

Powiązanie funkcji to termin używany do opisania relacji między Ten słowo kluczowe i funkcje w kodzie. Różnice w powiązaniu funkcji między funkcjami strzałkowymi a normalnymi mogą silnie wpływać na sposób konstruowania i używania funkcji strzałkowych.

Używając Ten słowo kluczowe czyni go unikalnym w zwykłych funkcjach i kojarzy się z różnymi obiektami w oparciu o metodę użytą do wywołania funkcji. Wiązanie funkcji jest jednym z najważniejszych rozróżnień między funkcjami regularnymi i strzałkowymi.

Natomiast funkcje strzałek nie mają Ten słowo kluczowe; raczej pobierają to z otaczających zakresów.

Spójrzmy na przykład, aby lepiej zrozumieć tę różnicę. Załóżmy, że masz osoba obiekt z A nazwa pole i metoda o nazwie powiedzImię() który używa zwykłej funkcji do rejestrowania nazwiska osoby:

konst osoba = {
 nazwa: 'Jan',
 powiedzImię: funkcjonować() {
konsola.dziennik(Ten.nazwa);
 }
};
konst innaOsoba = {
 nazwa: „Jane”
};
person.sayName.call (inna osoba); // rejestruje „Jane”

W tym przykładzie wywołujesz obiekt osoby powiedzImię() metoda z wartością inna osoba używając dzwonić() metoda. Z tego powodu, powiedzImię() metoda, Ten, słowo kluczowe jest powiązane z inna osoba obiekt i rejestruje „Jane"zamiast"Jan."

Użyjmy teraz tego samego z funkcją strzałki:

konst osoba = {
 nazwa: 'Jan',
 powiedzImię: () => {
konsola.dziennik(Ten.nazwa);
 }
};
konst innaOsoba = {
 nazwa: „Jane”
};
person.sayName.call (inna osoba); // dzienniki niezdefiniowane

od powiedzImię() technika nie ma własnego słowa kluczowego, w tym przykładzie używasz funkcji strzałki. W tym przypadku funkcja strzałki dziedziczy właściwości otaczającego zakresu, który jest zasięgiem globalnym.

Oznacza to, że kiedy biegasz person.sayName.call (inna osoba), funkcja strzałki Ten słowo kluczowe pozostaje obiektem globalnym i nieokreślony zajmuje miejsce Jane w dzienniku.

Jeśli chcesz powiązać funkcję z konkretną Ten wartości, preferowana może być zwykła funkcja. Jeśli jednak nie musisz powiązać funkcji z konkretną Ten wartość, funkcja strzałki może być krótsza i łatwiejsza do zrozumienia.

5. Niejawny zwrot

Funkcja strzałki ma niejawną funkcję powrotu. Jeśli treść funkcji składa się z jednego pojedynczego wyrażenia, funkcja zwraca to wyrażenie.

Jako przykład:

konst podwójne = (X) => X * 2;

Ta funkcja strzałki zwraca podwójne z parametru. Nie musisz używać jawnego powrót słowo kluczowe, ponieważ treść funkcji ma tylko jedno wyrażenie.

6. Różnice w kompatybilności

Różnice w kompatybilności odnoszą się do funkcji strzałek dodanych w ECMAScript 6, które mogą nie działać w starszych przeglądarkach lub środowiskach. Z drugiej strony, zwykłe funkcje istnieją od początku JavaScriptu i są powszechnie obsługiwane.

Oto ilustracja funkcji strzałki, która może nie działać w bardziej ustalonych warunkach:

konst dodaj = (a, b) => a + b;

Poniżej znajduje się porównywalna regularna funkcja, która powinna działać w większości sytuacji:

funkcjonowaćdodać(a, b) {
powrót a + b;
}

Używaj zwykłych funkcji zamiast funkcji strzałek podczas kierowania na starsze środowiska, aby zapewnić kompatybilność. Jednak funkcje strzałek mogą zapewniać składnię, która jest łatwiejsza do zrozumienia i bardziej skondensowana podczas pracy z nowoczesnymi przeglądarkami i środowiskami.

Wybieranie między funkcjami strzałek a zwykłymi funkcjami w JavaScript

W JavaScript funkcje strzałek i zwykłe mają różne funkcje i zastosowania. Funkcje strzałkowe mają prostą składnię, dziedziczącą Ten słowa kluczowego z kontekstu ich użycia, podczas gdy zwykłe funkcje są bardziej elastyczne i mogą radzić sobie z bardziej złożonymi sytuacjami.

Bardzo ważne jest, aby wiedzieć, czym się różnią i jak ich używać zgodnie z wymaganiami twojego kodu. Wybierając rodzaj funkcji do użycia, należy również wziąć pod uwagę różnice w kompatybilności.

Ostatecznie strzałki i zwykłe funkcje JavaScript to potężne narzędzia, które pomagają pisać czystszy i wydajniejszy kod.