Programowanie i skrypty

Jak używać funkcji strzałek w JavaScript

Jak używać funkcji strzałek w JavaScript

Składnia funkcji strzałek została wprowadzona z ECMAScript6: Za pomocą tej nowej składni, w niektórych (ale nie wszystkich) przypadkach, możemy wytworzyć bardziej zwięzły i czytelny kod, szczególnie gdy nasza funkcja zawiera tylko jedno wyrażenie. W tym samouczku zobaczymy, w jaki sposób możemy zdefiniować funkcję strzałki, jakie są różnice ze standardowymi funkcjami i jakie są przypadki, w których użycie funkcji strzałek nie jest odpowiednie.

W tym samouczku nauczysz się:

  • Co to jest funkcja strzałki.
  • Jak definiuje się funkcję strzałki.
  • Różnice między funkcjami strzałek a funkcjami standardowymi.
  • Przypadki, w których nie można użyć funkcji strzałek.

Wymagania oprogramowania i konwencje linii poleceń Linux
Kategoria Wymagania, konwencje lub wersja oprogramowania
System System operacyjny agnostyk.
Oprogramowanie Instalacja węzeł Aby śledzić ten samouczek w środowisku niebędącym przeglądarką.
Inny Znajomość koncepcji JavaScript i obiektowych.
Konwencje # - Wymaga, aby podane polecenia Linux są wykonywane z uprawnieniami root bezpośrednio jako użytkownik root lub za pomocą sudo Komenda
$ - Wymaga, aby podane polecenia Linux zostały wykonane jako zwykły użytkownik niepewny

Jaka jest „funkcja strzałki”?

Funkcje strzałek zostały wprowadzone za pomocą ECMAScript6: Korzystając z tej nowej składni, często możemy uzyskać bardziej zwięzły kod, w niektórych przypadkach tłumaczenie wielopoziomowych zwrotów na jedno-linie, dzięki takim funkcjom Niejawny zwrot. Jednak ze względu na swoje szczególne funkcje strzałek nie mogą wszędzie zastąpić standardowych funkcji: istnieją pewne konteksty, w których nie możemy ich użyć, i zobaczymy, dlaczego.

Od funkcji standardowych po funkcje strzałek

W tym akapicie zobaczymy przykład, w jaki sposób możemy zastąpić standardową funkcję funkcją strzałki: użyjemy zwrotu funkcji wyższego rzędu jako doskonałego przykładu podczas wykonywania takiego podstawienia jest całkowicie w porządku.

Jak na pewno wiesz, Funkcja wyższego rzędu jest funkcją, która zwraca inną funkcję lub akceptuje inną funkcję jako argument. W tym przykładzie będziemy używać filtr, Lub szyk.prototyp.filtr Jeśli lubisz. Ta metoda obiekt tablicy, podejmuje funkcję jako jego argument i zwraca nową tablicę, wypełnioną wszystkimi elementami oryginalnej tablicy, które są pozytywne do testu zaimplementowanego w funkcji wywołania zwrotnego.

Zobaczmy przykład używania filtra z klasyczną funkcją. Wyobraź sobie, że mamy szereg obiekty, Każdy z nich reprezentuje postacie z książki „Lord of the Rings”:

const postacie = [name: „frodo”, rasa: 'hobbit', nazwa: „Sam”, rasa: „hobbit”, name: „legoolas”, rasa: 'elf', name: ' Aragorn ', rasa: „Man”, nazwa: „Boromir”, rasa: „Man”]
Kopiuj

postacie tablica zawiera 5 elementów; Każdy z nich ma dwie właściwości: nazwa I wyścig. Załóżmy teraz, że chcemy stworzyć nową tablicę wypełnioną tylko postaciami, które należą do rasy ludzi. Za pomocą filtra i standardowej składni funkcji piszemy:

const men = znaki.filtr (funkcja filtermen (element) return Element.rasa == „człowiek”; );
Kopiuj

Jak powiedziano wcześniej, filtr, Obejmuje funkcję jako argument: Przy użyciu standardowej składni, ta funkcja może być nazywana lub anonimowa. W większości sytuacji funkcje anonimowe są używane jako wywołania zwrotne, ale ze względu na ten przykład, a później podkreślając jedną z różnic między funkcjami standardowymi i strzałkami, podaliśmy nazwę naszej funkcji: Filtermen.

Funkcja wywołania zwrotnego, z którą należy użyć filtr, zajmuje tylko jeden obowiązkowy parametr, który jest elementem oryginalnej tablicy, która jest przetwarzana za każdym razem. Jeśli funkcja zwraca PRAWDA, element jest wstawiany jako członek nowej tablicy, jeśli funkcja zwróci FAŁSZ Element nie jest. W tym konkretnym przypadku zdefiniowaliśmy prosty test:

postać.rasa == „człowiek”
Kopiuj

Ten test powraca PRAWDA Jeśli wyścigwłaściwość elementu, który jest przetwarzany, równa się łańcuchowi „człowiek”. Oto wynik tego, co napisaliśmy powyżej:

[Nazwa: „Aragor”, rasa: „Man”, nazwa: „Boromir”, rasa: „Man”]
Kopiuj

Załóżmy teraz, że chcemy przetworzyć powyższy kod za pomocą funkcja strzałki. Napisalibyśmy:

const men = znaki.filtr (element => element.rasa == „człowiek”);
Kopiuj

Za pomocą Funkcje strzałek Składnia, byliśmy w stanie osiągnąć ten sam wynik poprzedniego przykładu za pomocą jednego wiersza kodu: jak miło jest?!. Nie martw się, jeśli na pierwszy rzut oka nowa składnia myli Cię, po prostu czytaj dalej.

Składnia funkcji strzałek

Podczas gdy definiujemy standardową funkcję za pomocą funkcjonować słowo kluczowe, funkcja strzałki jest zdefiniowana za pomocą => symbol. Oczywiście nie jest to jedyna różnica między nimi: jedną z najważniejszych, które powinniśmy tutaj podkreślić, jest to, że chociaż funkcje klasyczne, w wyrażeniach funkcji, mogą być nazwane lub anonimowe, funkcje strzałek są zawsze anonimowe.

Definiowanie argumentów w funkcjach strzałek

W poprzednim przykładzie, ponieważ pozbywamy się funkcjonować Słowo kluczowe, pierwszą rzeczą, którą możemy przeczytać element, który jest argumentem zaakceptowanym przez funkcję strzałki. Reguła, którą należy przestrzegać przy określaniu argumentów oczekiwanych przez funkcję strzałki, jest prosta: jeśli funkcja przyjmuje wiele argumentów lub w ogóle żadne argumenty, musimy je zawrzeć między nawiasem; Jeśli funkcja zawiera tylko jeden argument, jak to jest w naszym przykładzie, możemy całkowicie pominąć nawias.

Jako przykład, wyobraź sobie, że chcemy zdefiniować funkcję, która zwraca produkt dwóch liczb przekazanych jako jego argumenty. Napisalibyśmy:

// Ponieważ funkcja przyjmuje dwa parametry, musimy użyć połączenia const multiply = (a, b) => a * b;
Kopiuj

Niejawne powrót i kręcone aparaty ortodontyczne

We wszystkich powyższych przykładach możesz zauważyć brak innej rzeczy: nawiasy klamrowe które ograniczają ciało funkcji. Dlaczego je pominęliśmy? Jeśli korpus funkcji strzałki składa się tylko z jednego wyrażenia, można pominąć klastrowe aparaty ortodontyczne: w przypadku tego, wynik wyrażenia jest domyślnie zwracany:

// Jeśli pomijamy kręcone szelki, wynik wyrażenia jest domyślnie zwrócony const mnożenie = (a, b) => a * b; pomnóż (2,3); 6 // Wynik to 6: Jest niejawnie zwracany // Jeśli używamy klamrowych klamrów, wynik nie jest domyślnie zwrócony const mnożenie = (a, b) => a * b pomnóż (2,3); Nieokreślony // wynik zostanie niezdefiniowany, ponieważ nie zwróciliśmy wyraźnie wyniku wyrażenia
Kopiuj

W powyższym kodzie zdefiniowaliśmy bardzo prostą funkcję, zwielokrotniać: Ta funkcja oczekuje dwóch parametrów, dlatego musimy je otrzymać między nawiasami. => Symbol określa funkcję strzałki. W pierwszym przykładzie, ponieważ mamy tylko jedno wyrażenie, które zwraca iloczyn dwóch liczb przekazanych jako parametry, możemy pominąć kręcone aparaty ortodontyczne i skorzystać z niejawnej funkcji powrotu.

W drugim przykładzie użyliśmy klastrowych aparatów ortodontycznych, dlatego funkcja zwróciła nieokreślony, Ponieważ nie mamy niejawnego zwrotu: aby uzyskać oczekiwany wynik, który powinniśmy zastosować powrót wyraźnie.

Wiele stwierdzeń lub wyrażeń w ciele funkcyjnym

Kręcone aparaty ortodontyczne są również jedynym sposobem, w jaki możemy określić wiele instrukcji lub wyrażeń wewnątrz funkcji strzałki. Załóżmy na przykład, że zamiast zwracać produkt dwóch liczb, chcemy, aby nasza funkcja wyświetlała ciąg, wyświetlając go:

const mnover = (a, b) => const Product = a*b; konsola.log ('produkt $ a i $ b to $ produkt');  pomnóż (2,3); Produkt 2 i 3 wynosi 6
Kopiuj

Co jeśli nasze funkcje strzałek będą musiały zwrócić dosłowność obiektu, sama wyznaczona przez kręcone aparaty ortodontyczne? W takim przypadku musimy otrzymać dosłownie obiektu między nawiasami:

const CreateChar = (CharacterName, Characrace) => (name: CharacterName, rasa: Charachrace); CreateChar („gimli”, „dwarf”) nazwa: „gimli”, rasa: „krasnolud”
Kopiuj

Jak Ten zachowuje się w funkcjach strzałek

Jednym z najbardziej istotnych, jeśli nie najbardziej istotnej różnicy między funkcjami klasycznymi a funkcjami strzałek, jest sposób, w jaki Ten Pracuje. Ta różnica jest głównym powodem, dla którego w niektórych przypadkach nie możemy używać funkcji strzałek, jak wkrótce zobaczymy. Przed podkreśleniem różnic, Podsumujmy, jak Ten działa, gdy jest używany w funkcjach standardowych. Pierwszą rzeczą do zapamiętania jest to, że wartość Ten jest określane przez sposób wywoływania samej funkcji, zobaczmy kilka przykładów.

Domyślny: Ten jest odniesieniem do globalnego zakresu

Gdy Ten jest używany w samodzielnej funkcji i nie pracujemy tryb ścisły, to odniesienia do globalnego zakresu, którym jest okno obiekt w środowisku przeglądarki lub obiekt globalny w węźle.JS. W tej samej sytuacji, ale w trybie ścisłym, Ten będzie nieokreślony I otrzymamy błąd:

var i = 20; // tutaj użyliśmy var zamiast let, ponieważ ten ostatni nie tworzy właściwości na globalnym zakresie. funkcja foo () konsola.Log (to.I);  // Tryb nierestrykcji FOO () 20 // Mode Surck Foo () typeeRror: Nie można odczytać właściwości „I” Undefined
Kopiuj

Niejawne wiązanie

Gdy funkcja standardowa jest odwoływana do obiektu, a funkcja ta jest wywoływana z tym obiektem jako kontekst, Za pomocą notacji DOT, Ten staje się odniesieniem do tego obiektu. To jest to co nazywamy Niejawne wiązanie:

funkcja foo () konsola.Log (to.I);  niech obiekt = i: 20, foo: foo // Właściwość foo jest odniesieniem do obiektu Foo Function.foo () // To jest odniesienie do obiektu, więc to.Ja jest przedmiotem.I 20
Kopiuj

Wyraźne wiązanie

Mówimy, że używamy wyraźne wiązanie Kiedy wyraźnie deklarujemy, co Ten powinien odnieść się. Można to osiągnąć za pomocą dzwonić, stosować Lub wiązać Metody funkcji (która sama w JavaScript jest sam obiekt pierwszej klasy. Pamiętaj o pierwszym przypadku wspomnianym powyżej, gdy ma zastosowanie domyślne powiązanie:

var i = 20; funkcja foo () konsola.Log (to.I);  const object = i: 100 foo () // to wyświetli 20 lub wygeneruje typeerror w trybie ścisłym. // Jeśli wyraźnie ustawimy to na odniesienie do obiektu zmian. // Zadzwoń i zastosuj wykonaj funkcję natychmiast za pomocą nowego kontekstu: FOO.wywołanie (obiekt) // wyjście to 100 foo.Zastosuj (Object) // Wyjście to 100 // Zamiast tego powiązanie, zwraca nową funkcję z określonym kontekstem. Let Boundfoo = foo.bind (Object) Boundfoo () // Wyjście to 100
Kopiuj

Są pewne różnice między dzwonić, stosować I wiązać: istotnym jest to, że ten ostatni zwraca nowa funkcja Związane z określonym kontekstem, podczas gdy z pozostałymi dwoma funkcją, związaną z określonym kontekstem, jest wykonywana natychmiast. Istnieją inne różnice, ale nie zobaczymy ich tutaj. Ważne jest zrozumienie, jak wyraźnie działa wiążące.

Jak funkcje strzałek są różne w Ten szacunek?

We wszystkich powyższych przypadkach i przykładach widzieliśmy, jak przy użyciu standardowych funkcji, wartość Ten Zależy od tego, jak nazywana jest funkcja. Funkcje strzałek, zamiast tego użyj leksykalne to: Nie mają własnych Ten, ale zawsze używaj Ten Z ich otaczającego zakresu. Typowy przykład, w którym może to wywołać nieoczekiwane efekty, jest słuchaczy zdarzeń. Załóżmy, że mamy przycisk z identyfikatorem „Button1” i chcemy zmienić jego tekst po kliknięciu:

Kliknij! // Dyskusator zdarzeń ze standardową funkcją jako dokument zwrotny.getElementById („Button1”).addEventListener („kliknij”, function () this.innerText = "kliknął!";)
Kopiuj

Kod działa idealnie, a po kliknięciu przycisku jego tekst zmienia się zgodnie z oczekiwaniami. Co jeśli w tym przypadku użyjemy funkcji strzałki? Załóżmy, że piszemy to w ten sposób:

dokument.getElementById („Button1”).addEventListener („kliknij”, () => to.innerText = "kliknął!";)
Kopiuj

Kod powyżej nie działa, dlaczego? Łatwe: ponieważ, jak powiedzieliśmy wcześniej, podczas gdy w pierwszym przykładzie, Ten Wewnątrz standardowej funkcji wywołania zwrotnego odwołuje się do obiektu, na którym występuje zdarzenie (przycisk), gdy używamy funkcji strzałki Ten jest dziedziczony po zakresie nadrzędnym, który w tym przypadku jest okno obiekt. Ze względu na kompletność powinniśmy powiedzieć, że powyższy przykład można łatwo naprawić do pracy z funkcją strzałki:

dokument.getElementById („Button1”).addEventListener („kliknij”, zdarzenie => zdarzenie.cel.innerText = "kliknął!";)
Kopiuj

Tym razem kod działa, ponieważ nie używaliśmy Ten Aby odwoływać się do przycisku, ale pozwalamy naszemu funkcji zaakceptować jeden argument, czyli wydarzenie. W ciele funkcyjnym, którego użyliśmy wydarzenie.cel Aby odnieść się do obiektu, który wysłał zdarzenie.

Z tego samego powodu, dla którego wspomnialiśmy powyżej, funkcji strzałek nie może być stosowane jako metody obiektu lub metody prototypowe:

// Funkcje strzałek nie działają jako metody obiektowe… const object1 = i: 1000, foo: () => konsola.log („Wartość I to $ to.i ') obiekt1.foo () Wartość i jest niezdefiniowana //… i nie działają jako prototypowe metody. const person = funkcja (nazwa, wiek) to.Nazwa = nazwa; Ten.wiek = wiek;  Osoba.prototyp.wprowadzać = () => konsola.log („Nazywam się $ to.nazwa i jestem $ to.wiek lat '); const jack = nowa osoba („Jack”, 100); Jacek.Nazwa „Jack” Jack.Wiek 100 Jack.wprowadzam () moje imię jest niezdefiniowane i mam nieokreślone lata
Kopiuj

Wnioski

Składnia funkcji strzałek jest bardzo fajną funkcją, wprowadzając ECMAScript6. Dzięki temu nowemu sposobowi definiowania funkcji możemy napisać krótszy i czystszy kod. Widzieliśmy, jak zdefiniować funkcję strzałki i jak działa nowa składnia.

Widzieliśmy również, dlaczego funkcje strzałek nie mogą zastąpić standardowych funkcji we wszystkich okolicznościach, ponieważ nie mają własnych Ten, i używa jednego z ich otaczającego zakresu: to, jak widzieliśmy w tym samouczku, czyni je nie użytecznymi jako metody lub konstruktorzy. Jeśli jesteś zainteresowany innymi samouczkami JavaScript, bądź na bieżąco: W następnym samouczku porozmawiamy o aportować, funkcjonować. W międzyczasie możesz sprawdzić nasz artykuł na temat obietnic.

Powiązane samouczki Linux:

  • Advanced Bash Regex z przykładami
  • Wprowadzenie do pętli JavaScript
  • Wprowadzenie do automatyzacji, narzędzi i technik Linuksa
  • Mastering Bash Script Loops
  • Rzeczy do zainstalowania na Ubuntu 20.04
  • Zagnieżdżone pętle w skryptach Bash
  • Bash Regexps dla początkujących z przykładami
  • Mint 20: Lepsze niż Ubuntu i Microsoft Windows?
  • Samouczek debugowania GDB dla początkujących
  • Utwórz przekieruj i przepisuj reguły do .Htaccess na Apache…