Najnowsza aktualizacja: 09.04.2018

Funkcje strzałkowe są skróconą wersją zwykłych funkcji. Funkcje strzałkowe tworzy się za pomocą znaku strzałki (=>), poprzedzonego parametrami funkcji w nawiasach i po treści samej funkcji. Na przykład:

Niech suma = (x, y) => x + y; niech a = suma(4, 5); // 9 niech b = suma(10, 5); // 15

W tym przypadku funkcja (x, y) => x + y dodaje dwie liczby i jest przypisana do sumy zmiennej. Funkcja przyjmuje dwa parametry - x i y. Jej ciało jest sumą wartości tych parametrów. A ponieważ za strzałką znajduje się konkretna wartość reprezentująca sumę liczb, funkcja zwraca tę wartość. I możemy wywołać zmienną sumy tę funkcję i umieść wynik w zmiennych a i b.

Jeśli po strzałce następuje operacja lub wyrażenie zwracające wartość, wówczas funkcja strzałkowa faktycznie zwraca tę wartość. Ale wyrażenie, które niczego nie zwraca i po prostu wykonuje jakąś akcję, może być również użyte jako treść funkcji:

Niech suma = (x, y) => console.log(x + y); suma(4, 5); // 9 suma(10, 5); // 15

W tym przypadku funkcja console.log() nic nie zwraca, zatem funkcja sumy również nie zwraca żadnego wyniku.

Jeśli funkcja przyjmuje jeden parametr, można pominąć nawiasy wokół niej:

Var kwadrat = n => n * n; konsola.log(kwadrat(5)); // 25 console.log(square(6)); // 36 console.log(kwadrat(-7)); // 49

Jeśli ciało funkcji reprezentuje zbiór wyrażeń, to są one ujęte w nawiasy klamrowe:

Var kwadrat = n => ( niech wynik = n * n; zwróć wynik; ) console.log(square(5)); // 25

Aby w tym przypadku zwrócić wynik funkcji, należy użyć standardowej instrukcji return.

Szczególną uwagę należy zwrócić na przypadek, gdy funkcja strzałkowa zwraca obiekt:

Niech użytkownik = (nazwa użytkownika, wiek użytkownika) => ((nazwa: nazwa użytkownika, wiek: wiek użytkownika)); niech tom = użytkownik("Tomek", 34); niech bob = użytkownik("Bob", 25); console.log(tom.imię, tom.wiek); // "Tomek", 34 console.log(bob.name, bob.age); // „Bób”, 25

Obiekt definiuje się również za pomocą nawiasów klamrowych, ale jest on ujęty w nawiasy.

Jeżeli funkcja strzałkowa nie przyjmuje żadnych parametrów, wówczas wstawiane są puste nawiasy:

Var hello = ()=> console.log("Hello World"); Witam(); // Witaj świecie, witaj(); // Witaj, świecie

Stały się bardzo modne, widzimy je we wszystkich nowych artykułach. A jeśli nie jesteś do nich przyzwyczajony, będziesz miał trudności ze zrozumieniem nowoczesnego kodu (ES6) zawierającego funkcje strzałkowe.

Celem tego artykułu nie jest wskazanie, kiedy i jak z nich korzystać. Spróbuję tylko wyjaśnić nową składnię tym, którzy widzą ją po raz pierwszy. Nie ma znaczenia, czy z niego skorzystasz, czy nie, ale prędzej czy później i tak gdzieś go spotkasz. Lepiej więc zrozumieć mechanikę tej nowej składni.

Oto mały przykład:

Stała addOne = funkcja(n) ( return n + 1; )

Powyższy kod można zapisać w następujący sposób:

Stała addOne = (n) => (zwróć n + 1; )

Lub, w tym przypadku, jeszcze krócej:

Stała addOne = (n) => n + 1;

W drugim przykładzie zastosowano nawiasy klamrowe ( ... ), ale ponieważ jest to tylko jeden wiersz kodu, nawiasy klamrowe można pominąć i zasugerować zwrot, jak widać w trzecim przykładzie.

Gdy funkcja strzałkowa ma jeden parametr, nawiasy można pominąć:

// Było: SomeCallBack((results) => ( ... )) // Teraz: SomeCallBack(results => ( ... ))

Jeśli jednak nie ma parametrów, należy użyć nawiasów otwierających i zamykających:

SomeCallBack(() => ( ... ))

Strzałki funkcyjne są szczególnie przydatne w przypadku wywołań zwrotnych. Osoby zaznajomione z JavaScriptem znają jego zakres leksykalny, który jest całkiem fajny, ale może wykonywać takie sztuczki ( Ten):

Var_this = to; SomeCallBack(funkcja() ( _this.accessOuterScope(); ))

Istnieje kilka odmian tego „_tego” (takich jak „ja” lub „tamto”), ale idea jest taka sama. W funkcjach wywołania zwrotnego potrzebujemy dostępu do wersji o zasięgu zewnętrznym, ale idea jest ta sama. W funkcjach wywołania zwrotnego potrzebujemy dostępu do wersji this z zakresu zewnętrznego, która jest teraz inna niż wcześniej, ponieważ mówimy o funkcji wywołania zwrotnego.

Używając funkcje strzałek, otrzymujemy „zakres blokowy” i „to”, co w obu przypadkach oznacza to samo „to”. Oznacza to, że powyższy kod można przepisać bez _this = this:

SomeCallBack(() => ( this.accessOuterScope(); ))

Wyobraźmy sobie sytuację jak w React, gdzie zdarzenie naKliknij powinien wywołać doSomething() , (), ale powinien także przekazać argumenty do doSomething() (np. ID). Ten przykład faktycznie nie działa:

Jakiś użytkownik)))

Kod zostanie uruchomiony, ale technicznie rzecz biorąc, wywoła funkcję doSomething() natychmiast po załadowaniu strony. Aby rozwiązać ten problem, niektórzy programiści odwołują się do funkcji opakowania:

Const User = React.createClass(function() ( render: funkcja() (zwróć jakiegoś użytkownika), onClick: funkcja() ( doSomething(this.props.userId); ) ))

Brak nawiasu w this.onClick oznacza, że ​​jest to po prostu odwołanie do funkcji, a nie wywołanie funkcji.

Funkcja onClick() jest teraz czymś w rodzaju opakowania dla doSomething() . Za pomocą funkcji strzałek możesz tworzyć „owijki” tego typu:

Stały użytkownik = React.createClass(function() ( render: funkcja() ( return doSomething(this.props.userId))>Jakiś użytkownik ) ))

Alternatywnie możemy również użyć funkcji .bind() , która nie wymaga żadnych opakowań (funkcji strzałkowych ani niczego):

Stały użytkownik = React.createClass(funkcja() ( render: funkcja() (zwróć Jakiś użytkownik )))

Jeśli potrzebujesz wsparcia dla przeglądarek innych niż najnowsze Chrom I Firefoksa, używać Transpilator Babel aby przekonwertować napisany kod ES6 na ES5.

O słowie kluczowym „this” w JavaScript: funkcje użytkowe z objaśnieniami

Słowo kluczowe this przez długi czas pozostawało dla mnie tajemnicą. Ten potężne narzędzie, ale nie jest łatwo to rozgryźć.

Z punktu widzenia Java, PHP lub dowolnego innego języka regularnego jest to traktowane jako instancja bieżącego obiektu w metodzie klasy, nic więcej i nic mniej. Najczęściej nie można go zastosować poza metodą i podejście to nie jest źle rozumiane.

W JavaScript jest to bieżący kontekst wykonania funkcji. Ponieważ funkcję można wywołać na cztery sposoby:

• wywołanie funkcji: alert("Hello World!"),
• wywołanie metody: console.log("Hello World!"),
• wywołanie konstruktora: new RegExp("\\d") ,
• wywołanie pośrednie: alert.call(undefiniowane, „Hello World!”),

i każdy z nich definiuje swój własny kontekst, zachowanie tego jest nieco niezgodne z tym, czego oczekiwaliby początkujący programiści. Ponadto tryb ścisły wpływa również na kontekst wykonania.

Kluczem do zrozumienia słowa kluczowego this jest zrozumienie, w jaki sposób funkcja jest wywoływana i jak wpływa ona na kontekst. W tym artykule omówiono wywołania funkcji, wpływ wywołań na to i typowe pułapki podczas identyfikowania kontekstu.

Zanim zaczniemy, zapoznajmy się z kilkoma terminami:

• Wywołanie to wykonanie kodu treści funkcji. Na przykład wywołanie funkcji parseInt będzie brzmiało parseInt("15") .
• Kontekst wywołujący to wartość this w treści funkcji.
• Zasięg funkcji to zbiór zmiennych, obiektów i funkcji, do których można uzyskać dostęp z poziomu treści funkcji.

Wywołanie funkcji ma miejsce, gdy po wyrażeniu będącym obiektem funkcji następuje nawias otwarty (, lista argumentów rozdzielonych przecinkami i nawias zamykający), na przykład parseInt("18") . Wyrażenie nie może być akcesorem do myObject.myFunction wywołującym metodę. Na przykład .join(",") nie jest wywołaniem funkcji, ale wywołaniem metody.

Prosty przykład wywołania funkcji:

Funkcja hello(name) ( return "Hello " + name + "!"; ) // Wywołanie funkcji var message = hello("World"); konsola.log(wiadomość); // => "Witaj, świecie!"

hello("Świat") jest wywołaniem funkcji: hello jest traktowane jako obiekt funkcji, po którym następuje argument "Świat" w nawiasach.

Var Message = (funkcja(nazwa) ( return "Witam " + nazwa + "!"; ))("Świat"); konsola.log(wiadomość); // => "Witaj, świecie!"

Jest to również wywołanie funkcji: pierwsza para nawiasów (funkcja(nazwa) (...)) traktowana jest jako obiekt funkcji, po której następuje argument w nawiasie: („Świat”).

jest to obiekt globalny podczas wywoływania funkcji

Obiekt globalny jest zdefiniowany przez środowisko wykonawcze. W przeglądarce internetowej jest to obiekt okna.

W wywołaniu funkcji kontekstem wykonania jest obiekt globalny. Sprawdźmy kontekst następującej funkcji:

Funkcja sum(a, b) ( console.log(this === window); // => true this.myNumber = 20; // dodaj właściwość „myNumber” do obiektu globalnego return a + b; ) // sum( ) jest wywoływane jako funkcja // to w sum() jest obiektem globalnym (okno) console.log(sum(15, 16)); // => 31 console.log(window.myNumber); // => 20

Po wywołaniu funkcji sum(15, 16) JavaScript automatycznie inicjuje ją jako obiekt globalny, czyli okno w przeglądarce.

Kiedy jest to używane poza zakresem jakiejkolwiek funkcji (najbardziej zewnętrzny zakres: globalny kontekst wykonania), odnosi się również do obiektu globalnego:

Console.log(to === okno); // => true this.myString = "Witaj, świecie!"; konsola.log(okno.myString); // => "Witaj, świecie!"

dzieje się tak podczas wywoływania funkcji w trybie ścisłym

/* jshint esnext: true */ class City ( konstruktor(nazwa, podróż) ( this.name = name; this.traveled = false; ) travel() ( this.traveled = true; ) ) // Wywołanie konstruktora var paris = nowe miasto("Paryż", fałsz); Paryż.podróż();

new City("Paryż") jest wywołaniem konstruktora. Inicjalizacja obiektu sterowana jest specjalną metodą klasy: konstruktor, której jest nowo utworzonym obiektem.

Wywołanie konstruktora tworzy nowy pusty obiekt, który dziedziczy właściwości prototypu konstruktora. Rolą funkcji konstruktora jest inicjalizacja obiektu. Jak już wiesz, kontekst tego typu wywołania nazywany jest instancją. Jest to temat następnego rozdziału.

to w wywołaniu konstruktora

to jest nowo utworzony obiekt

Kontekstem wywołania konstruktora jest nowo utworzony obiekt. Służy do inicjowania obiektu danymi z argumentu funkcji konstruktora.

Sprawdźmy kontekst w następującym przykładzie:

new Foo() wywołuje konstruktor z kontekstem fooInstance . Obiekt jest inicjowany wewnątrz Foo: this.property ma ustawioną wartość domyślną.

To samo dzieje się przy użyciu klasy, tylko inicjalizacja następuje w metodzie konstruktora:

/* jshint esnext: true */ class Bar ( konstruktor() ( console.log(to wystąpienie Bar); // => true this.property = "Wartość domyślna"; ) ) // Wywołanie konstruktora var barInstance = new Bar( ); konsola.log(barInstance.właściwość); // => „Wartość domyślna”

Kiedy wykonywana jest funkcja new Bar(), JavaScript tworzy pusty obiekt i czyni go kontekstem metody konstruktora. Możesz teraz dodawać właściwości za pomocą tego: this.property = "Wartość domyślna" .

Niektóre funkcje JavaScript tworzą instancje, gdy są wywoływane nie tylko jako konstruktor, ale także jako funkcja. Na przykład RegExp:

Var reg1 = nowy RegExp("\\w+"); var reg2 = RegExp("\\w+"); console.log(reg1 instancja RegExp); // => true console.log(reg2 instancja RegExp); // => true console.log(reg1.source === reg2.source); // => prawda

Kiedy wykonywane są nowe RegExp("\\w+") i RegExp("\\w+"), JavaScript tworzy równoważne obiekty wyrażeń regularnych.

Użycie wywołania funkcji do utworzenia obiektu jest potencjalnie niebezpieczne (jeśli pominie się metodę fabryczną), ponieważ niektóre konstruktory mogą nie zainicjować obiektu w przypadku braku słowa kluczowego new.

Poniższy przykład ilustruje problem:

Funkcja Pojazd(typ, liczba kół) ( this.type = typ; this.wheelsCount = kołaCount; zwróć to; ) // Wywołanie funkcji var car = Vehicle("Samochód", 4); konsola.log(typ.samochodu); // => "Samochód" console.log(car.wheelsCount); // => 4 console.log(samochód === okno); // => prawda

Pojazd to funkcja ustawiająca typ i właściwości WheelCount obiektu kontekstowego. Podczas wykonywania Vehicle("Car", 4) zwraca obiekt car z poprawnymi właściwościami: car.type jest równy "Car" i car.wheelsCount wynosi 4 . Łatwo jest pomyśleć, że wszystko działa tak, jak powinno.

Jednak to jest obiekt okna podczas wywoływania funkcji, a Vehicle("Car", 4) ustawia właściwości obiektu okna - ups, coś poszło nie tak. Nowy obiekt nie został utworzony.

Pamiętaj, aby użyć operatora new, gdy oczekiwane jest wywołanie konstruktora:

Funkcja Pojazd(typ, liczba kół) ( if (!(to wystąpienie pojazdu)) ( rzut Błąd("Błąd: nieprawidłowe wywołanie"); ) this.type = type; this.wheelsCount = kołaCount; zwróć to; ) // Wywołanie konstruktora var samochód = nowy pojazd("Samochód", 4); konsola.log(typ.samochodu); // => "Samochód" console.log(car.wheelsCount); // => 4 console.log(instancja samochodupojazdu); // => true // Wywołanie funkcji. Generuje błąd. var zepsuty samochód = Pojazd("Zepsuty samochód", 3);

nowy pojazd("Samochód", 4) działa poprawnie: nowy obiekt utworzony i zainicjowany, ponieważ obecne jest słowo nowy.

Dodano weryfikację do wywołania funkcji: ta instancja pojazdu, aby upewnić się, że kontekst wykonania ma poprawny typ obiektu. Jeżeli nie jest to Vehicle , generowany jest błąd. Zatem jeśli zostanie wykonany Vehicle("Broken Car", 3) (bez new), wówczas zostanie zgłoszony wyjątek: Error: Incorrect invocation .

Pośrednie wywołanie ma miejsce, gdy funkcja jest wywoływana metodami .call() lub .apply().

/* jshint esnext: true */ var sumArguments = (...args) => ( console.log(typeof arguments); // => "niezdefiniowany" return args.reduce((wynik, pozycja) => wynik + pozycja ); konsola.log(sumaArgumentów.nazwa); // => "" console.log(sumArguments(5, 5, 6)); // => 16

jest to kontekst, w którym zdefiniowana jest funkcja strzałkowa

Funkcja strzałkowa nie tworzy własnego kontekstu wykonania, ale zapożycza go z funkcji zewnętrznej, w której jest zdefiniowana.

Poniższy przykład pokazuje przezroczystość kontekstu:

/* jshint esnext: true */ class Point ( konstruktor(x, y) ( this.x = x; this.y = y; ) log() ( console.log(this === mójPoint); setTimeout(() => ( console.log(this === mójPoint); // => true console.log(this.x + ":" + this.y); // => "95:165" ), 1000); ) ) var mójPoint = nowy Punkt(95, 165); mójPoint.log();

setTimeout wywołuje funkcję strzałkową w tym samym kontekście (metoda myPoint), co metoda log(). Jak widzimy, funkcja strzałkowa „dziedziczy” kontekst funkcji, w której jest zdefiniowana.

Jeśli w tym przykładzie spróbujesz użyć zwykłej funkcji, utworzy ona własny kontekst (okno lub niezdefiniowany). Dlatego aby kod działał poprawnie należy ręcznie powiązać kontekst: setTimeout(function() (...).bind(this)) . Jest to kłopotliwe, więc łatwiej jest użyć funkcji strzałki.

Jeśli funkcja strzałkowa jest zdefiniowana poza wszystkimi funkcjami, jej kontekst jest obiektem globalnym:

/* jshint esnext: true */ var getContext = () => ( console.log(this === okno); // => true zwróć to; ); console.log(getContext() === okno); // => prawda

Funkcja strzałki jest raz na zawsze powiązana z kontekstem leksykalnym. nie można tego zmienić nawet przy użyciu metody zmiany kontekstu:

/* jshint esnext: true */ var number = ; (funkcja() ( var get = () => (zwróć to; ); console.log(this === liczby); // => true console.log(get()); // => // Użyj funkcja strzałkowa z .apply() i .call() console.log(get.call()); // => console.log(get.apply()); // => // Powiązanie console.log(get ); .bind()()); // => )).call(liczby);

Funkcja wywoływana pośrednio przy użyciu .call(numbers) ustawia tę wartość na wartość liczbową. Funkcja strzałkowa get również otrzymuje liczby w ten sposób, ponieważ bierze kontekst leksykalnie. Bez względu na to, jak zostanie wywołana funkcja get, jej kontekstem zawsze będą liczby. Pośrednie wywołanie z innym kontekstem (przy użyciu .call() lub .apply()), ponowne powiązanie (przy użyciu .bind()) nie będzie miało żadnego efektu.

Funkcji strzałkowej nie można używać jako konstruktora. Jeśli wywołasz funkcję new get() , JavaScript zgłosi błąd: TypeError: get nie jest konstruktorem.

Możesz użyć funkcji strzałki, aby zadeklarować metodę. Całkiem nieźle: ich deklaracje są znacznie krótsze w porównaniu ze zwykłym wyrażeniem: (param) => (...) zamiastfunction(param) (..) .

Poniższy przykład ilustruje definicję metody format() klasy Period za pomocą funkcji strzałkowej:

/* jshint esnext: true */ funkcja Okres (godziny, minuty) ( this.hours = godziny; this.minuty = minuty; ) Period.prototype.format = () => ( console.log(this === okno) ; // =>

Ponieważ format jest funkcją strzałkową zdefiniowaną w kontekście globalnym, jest to obiekt okna. Nawet jeśli format jest wykonywany jako metoda obiektu walkPeriod.format(), kontekstem wywołującym pozostaje window. Dzieje się tak, ponieważ funkcja strzałkowa ma kontekst statyczny, który nie jest modyfikowany przez inne typy wywołań.

to jest okno, więc te.godziny i te.minuty stają się niezdefiniowane. Metoda zwraca ciąg „niezdefiniowane godziny i niezdefiniowane minuty”, co nie jest pożądanym wynikiem.

Wyrażenie funkcyjne rozwiązuje problem, ponieważ funkcja regularna zmienia swój kontekst w zależności od wywołania:

Funkcja Okres (godziny, minuty) ( this.hours = godziny; this.minuty = minuty; ) Period.prototype.format = funkcja() ( console.log(this === walkPeriod); // => true zwróć to. godziny + "godziny i " + this.minuty + "minuty" ); var walkPeriod = nowy okres(2, 30); konsola.log(walkPeriod.format());

walkPeriod.format() to wywołanie metody z kontekstem walkPeriod. this.hours przyjmuje wartość 2, a this.minuty przyjmuje wartość 30, więc metoda zwraca poprawny wynik: „2 godziny i 30 minut” .

Ponieważ największy wpływ na to ma wywołanie funkcji, od tej chwili nie pytaj:

Skąd to się bierze?

i zapytaj:

Jak nazywa się funkcja?

A w przypadku funkcji strzałkowej zapytaj:

Co to jest miejsce, w którym deklarowana jest funkcja strzałki?

Takie podejście do tego pozwoli Ci uniknąć niepotrzebnych bólów głowy.

Nie mylcie kontekstów! 🙂

12 odpowiedzi

To jest funkcja strzałkowa.

Funkcje strzałkowe to krótka składnia wprowadzona w ECMAscript 6, której można używać w podobny sposób, jak używa się wyrażeń funkcyjnych. Innymi słowy, często można ich używać zamiast wyrażeń takich jak funkcja (foo) (...) . Ale mają kilka istotnych różnic. Na przykład nie wiążą one własnych wartości (patrz dyskusja poniżej).

Funkcje strzałek są częścią specyfikacji ECMAscript 6. Nie są jeszcze obsługiwane we wszystkich przeglądarkach, ale są częściowo lub w pełni obsługiwane w Node v. 4.0+ i w większości nowoczesnych przeglądarek używanych od 2018 r. (Poniżej znajduje się częściowa lista obsługiwanych przeglądarek).

Z dokumentacji Mozilli:

Uwaga o tym, jak to działa w funkcjach strzałkowych

Jedna z najwygodniejszych funkcji funkcji strzałki ukryta jest w powyższym tekście:

Mówiąc najprościej, oznacza to, że funkcja strzałkowa przechowuje wartość this ze swojego kontekstu i nie ma własnej this . Tradycyjna funkcja może sama wiązać tę wartość, w zależności od tego, jak jest zdefiniowana i wywołana. Może to wymagać dużej gimnastyki, np. self = this; itp., aby uzyskać dostęp lub manipulować tym z jednej funkcji w innej funkcji. Więcej informacji na ten temat znajdziesz w objaśnieniach i przykładach w dokumentacji Mozilli.

Przykład (również z dokumentów):

Var a = [ „Nie śpimy całą noc „aż do wschodu słońca”, „Nie śpimy całą noc, żeby się czegoś napić”, „Nie śpimy całą noc, żeby się dobrze bawić”, „Nie śpimy całą noc, żeby się czegoś napić” lucky" ]; // Te dwa przypisania są równoważne: // Oldschoolowe: var a2 = a.map(function(s)( return s.length )); // ECMAscript 6 przy użyciu funkcji strzałkowych var a3 = a.map (s => s.length); // zarówno a2, jak i a3 będą równe

Możesz używać funkcji strzałek w Node, ale obsługa przeglądarek nie jest całkowicie poprawna.

Obsługa tej funkcji przez przeglądarki znacznie się poprawiła, lecz nadal nie jest ona wystarczająco rozpowszechniona w przypadku większości aplikacji opartych na przeglądarce. Od 12 grudnia 2017 r. jest obsługiwany w aktualnych wersjach:

• Chrome (w porównaniu z 45+)
• Firefox (wersja 22+)
• Edge (w porównaniu z 12+)
• Opera (wersja 32+)
• Przeglądarka na Androida(wersja 47+)
• Opera Mobile (wersja 33+)
• Chrome na Androida (wersja 47+)
• Firefox dla Androida (wersja 44+)
• Safari (wersja 1 0+)
• Safari na iOS (wersja 10.2+)
• Internet Samsung (wersja 5+)
• Przeglądarka Baidu (wersja 7. 12+)

Nieobsługiwane w:

• IE (przed art. 11)
• Opera Mini (do wersji 8.0)
• Przeglądarka Blackberry (do wersji 10)
• IE Mobile (do wersji 11)
• Przeglądarka UC dla Androida (do wersji 11.4)
• QQ (do wersji 1.2)

Więcej (i bardziej aktualnych) informacji można znaleźć na stronie CanIUse.com (bez powiązania).

Nazywa się to funkcją strzałkową i jest częścią specyfikacji ECMAScript 2015...

var foo = ["a", "ab", "abc"]; var bar = foo.map(f => f.length); konsola.log(bar); // 1,2,3

Krótsza składnia niż poprzednia:

// < ES6: var foo = ["a", "ab", "abc"]; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3

Kolejną niesamowitą rzeczą jest leksykalność... Zwykle robisz coś takiego:

funkcja Foo() ( this.name = nazwa; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = funkcja() ( var self = this; setInterval(function() ( // to jest Window, a nie Foo (), jak można się spodziewać, console.log(this); // // dlatego ponownie przypisujemy to do self przed setInterval() console.log(self.count++), 1000) ) new Foo();

Ale można to przepisać za pomocą strzałki takiej jak ta:

funkcja Foo() ( this.name = nazwa; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = funkcja() ( setInterval(() => ( console.log(this); // console.log(this.count); // 1, 2, 3 this.count++ ), 1000) ) nowy Foo();

Byłoby to „wyrażenie funkcji strzałkowej” wprowadzone w ECMAScript 6.

Dla celów historycznych (jeśli strona wiki ulegnie późniejszej zmianie):

Wyrażenie funkcji strzałkowej ma krótszą składnię niż wyrażenie funkcyjne i leksykalnie wiąże tę wartość. Funkcje strzałkowe są zawsze anonimowe.

Znane również jako funkcje grubych strzałek. Jest to prosty i przejrzysty sposób pisania wyrażeń funkcyjnych, takich jak funkcja() () .

Funkcje strzałek mogą wyeliminować potrzebę stosowania funkcji, powrotu i () podczas definiowania funkcji. Są to linijki podobne do wyrażeń lambda w Javie lub Pythonie.

stała kolejka = ["Dave", "Sarah", "Sharon"]; const nextCustomer = () => kolejka; konsola.log(następnyKlient()); // „Dave”

Jeśli chcesz wykonać wiele instrukcji w tej samej funkcji strzałkowej, w tym przykładzie musisz ująć kolejkę w nawiasy klamrowe () . W takim przypadku nie można pominąć instrukcji return.

stała kolejka = ["Dave", "Sarah", "Sharon"]; const addCustomer = nazwa => ( kolejka.push(nazwa); ); dodajKlient("Toby"); konsola.log(kolejka); // ["Dave", "Sarah", "Sharon", "Toby"]

Możesz pominąć () z powyższego.

Jeśli występuje pojedynczy parametr, nawiasy () wokół parametru można pominąć.

const addNumbers = (x, y) => x + y console.log(addNumbers(1, 5)); // 6

Gdybyśmy chcieli uzyskać cenę każdego owocu w jednej tablicy, w ES5 moglibyśmy zrobić:

Owoce.map(funkcja(owoce) (zwróć owoc.cena; )); //

W ES6, dzięki nowym funkcjom strzałek, możemy to uczynić bardziej zwięzłym:

Owoce.map(owoce => owoce.cena); //

Dodatkowe informacje o funkcjach ze strzałkami można znaleźć.

• IE: jeszcze nieobsługiwane
• Krawędź: 12+ (wszystkie wersje)
• Firefox: 22+
• Chrom: 45+
• Safari: 10+
• Safari na iOS: 10.2+
• Przeglądarka na Androida: 56+

Aby uzyskać więcej aktualnych informacji na temat kompatybilności przeglądarek, odwiedź stronę

Jak powiedzieli inni, jest to nowa składnia tworzenia funkcji.

Jednak ten typ funkcji różni się od zwykłych:

Wiążą wartość tego. Jak wyjaśnia specyfikacja,

ArrowFunction nie definiuje lokalnych powiązań dla argumentów, super, this lub new.target. Wszelkie odniesienia do arguments , super , this lub new.target w ArrowFunction rozwiązują powiązanie w środowisku leksykalnym. Zwykle będzie to środowisko funkcjonalne, które natychmiast stanie się funkcją.

Mimo że ArrowFunction może zawierać odniesienia do super, obiekt funkcji utworzony w kroku 4 nie jest przekształcany w metodę poprzez wykonanie MakeMethod. Funkcja ArrowFunction odwołująca się do funkcji super jest zawsze zawarta w funkcji innej niż strzałkowa, a niezbędna implementacja funkcji super jest dostępna poprzez zakres przechwytywany przez obiekt funkcji ArrowFunction.

• Nie są konstruktorami.

  Oznacza to, że nie mają one wewnętrznej metody [] i dlatego nie można ich np. utworzyć

  Var f = a => a; f(123); // 123 nowe f(); // TypeError: f nie jest konstruktorem

Dodatek prosty przykład CRUD ze strzałką

//Funkcja strzałki var klienci = [ (imię: „Dave”, kontakt: „9192631770” ), ( imię: „Sarah”, kontakt: „9192631770” ), ( imię: „Akhil”, kontakt: „9928462656” )] , // Brak parametru READ getFirstCustomer = () => ( console.log(this); zwróć klientów; );

console.log("Pierwszy klient "+JSON.stringify(getFirstCustomer())); // "Dave" //1 Param SZUKAJ getNthCustomer = indeks=>( if(index>customers.length) ( return "Nie ma czegoś takiego"; ) else( zwróć klientów; ) );

W JavaScript symbol => jest symbolem wyrażenia funkcji strzałki. Wyrażenie funkcji strzałkowej nie ma własnego tego powiązania i dlatego nie może być użyte jako funkcja konstruktora. Na przykład:

var słowa = "cześć z obiektu zewnętrznego"; niech obj = ( słowa: „cześć z wnętrza obiektu”, rozmowa1: () => (console.log(this.words)), rozmowa2: funkcja () (console.log(this.words)) ) obj.talk1( ); // nie ma własnego tego powiązania, this === window obj.talk2(); // ma własne to powiązanie, jest to obj

• Jeśli istnieje tylko jeden argument, możesz pominąć nawiasy argumentowe.
• Jeśli zwrócisz wyrażenie i zrobisz to w tym samym wierszu, możesz pominąć instrukcje () i return

Na przykład:

niech razy2 = wartość => wartość * 2; // Znajduje się w tej samej linii i zwraca wyrażenie, zatem () zostaje zatwierdzone, a wyrażenie zwraca się niejawnie // jest też tylko jeden argument, dlatego nawiasy wokół argumentu są pomijane console.log(times2(3));

Niezadowolony z innych odpowiedzi. Odpowiedź, na którą głosowano najczęściej w dniu 3.03.2019 r., jest niepoprawna pod względem faktycznym.

Krótka, zwięzła wersja tego, co oznacza =>, to skrót do napisania funkcji i powiązania jej z bieżącym

Stała foo = a => a * 2;

Skuteczny skrót do

Const foo = funkcja(a) (zwróć a * 2; ).bind(this);

Możesz zobaczyć wszystkie rzeczy, które zostały wycięte. Nie potrzebujemy funkcji, return, .bind(this) , nawiasów ani nawiasów

Nieco dłuższym przykładem funkcji strzałkowej może być

Const foo = (szerokość, wysokość) => ( const obszar = szerokość * wysokość; obszar zwrotu; );

Pokazano, że jeśli potrzebujemy wielu argumentów funkcji, potrzebujemy nawiasów, a jeśli chcemy napisać więcej niż jedno wyrażenie, potrzebujemy nawiasów klamrowych i jawnego powrotu.

Ważne jest, aby zrozumieć część .bind, a to duży temat. Ma to związek z tym, co to oznacza w JavaScript.

WSZYSTKIE funkcje mają ukryty parametr zwany this . Sposób ustawienia tej opcji podczas wywoływania funkcji zależy od sposobu wywołania funkcji.

przyjąć

Funkcja foo() ( console.log(this); )

Jeśli to nazwiesz ok

Funkcja foo() ( console.log(this); ) foo();

będzie to obiekt globalny.

Jeśli jesteś w trybie ścisłym

„użyj ściśle”; funkcja foo() ( console.log(this); ) foo(); // lub funkcja foo() („użyj ściśle”; console.log(this); ) foo();

Będzie nieokreślony

Możesz to ustawić bezpośrednio, dzwoniąc lub aplikując

Funkcja foo(msg) ( console.log(msg, this); ) const obj1 = (abc: 123) const obj2 = (def: 456) foo.call(obj1, "cześć"); // wypisuje Witaj (abc: 123) foo.apply(obj2, ["cześć"]); // wypisuje Cześć (def: 456)

Można to także ustawić niejawnie, używając operatora kropki.

Funkcja foo(msg) ( console.log(msg, this); ) const obj = ( abc: 123, bar: foo, ) obj.bar("Hola"); // drukuje Hola (abc:123, takt: f)

Problem pojawia się, gdy chcesz użyć funkcji jako wywołania zwrotnego lub słuchacza. Tworzysz klasę i chcesz przypisać funkcję jako wywołanie zwrotne, które uzyskuje dostęp do instancji klasy.

Klasa ShowName ( konstruktor(nazwa, elem) ( this.name = nazwa; elem.addEventListener("kliknięcie", funkcja() ( console.log(this.name); // nie zadziała )); ) )

Powyższy kod nie będzie działać, ponieważ gdy element zgłosi zdarzenie i wywoła funkcję, wartość this nie będzie instancją klasy.

Jednym z powszechnych sposobów rozwiązania tego problemu jest użycie .bind

Klasa ShowName ( konstruktor(nazwa, elem) ( this.name = nazwa; elem.addEventListener("kliknięcie", funkcja() ( console.log(this.name); ).bind(this); // ( console.log (to.imię);

bind robi to skutecznie nowa funkcja. Gdyby nie istniało powiązanie, mógłbyś stworzyć własne w ten sposób

Funkcja bind(funkcjaToBind, wartośćToUseForThis) ( funkcja zwracająca(...args) (functionToBind.call(valueToUseForThis, ...args); )

W starym JavaScript bez operatora spread byłoby to

Funkcja bind(funkcjaToBind, wartośćToUseForThis) ( return funkcja() ( funkcjaToBind.apply(wartośćToUseForThis, argumenty); )

Zrozumienie, że kod wymaga zrozumienia domknięć, ale krótka wersja bind tworzy nową funkcję, która zawsze wywołuje oryginalną funkcję z powiązaną z nią wartością this. Funkcja strzałki robi to samo, ponieważ jest skrótem do wiązania (tego)

Strzałka funkcji, oznaczona symbolem (=>), pomaga w tworzeniu anonimowych funkcji i metod. Skutkuje to krótszą składnią. Na przykład poniżej znajduje się prosta funkcja Dodaj, która zwraca dodanie dwóch liczb.

Funkcja Dodaj(liczba1, liczba2)(zwróć liczba1 + liczba2; )

Powyższa funkcja staje się krótsza przy użyciu składni Arrow, jak pokazano poniżej.

Powyższy kod składa się z dwóch części, jak pokazano na powyższym obrazku:

Dane wejściowe: — Ta sekcja określa parametry wejściowe funkcji anonimowej.

Logika: - Ta sekcja pojawia się po symbolu „=>”. Ta sekcja zawiera logikę aktualnej funkcji.

Wielu programistów uważa, że ​​funkcja strzałki sprawia, że ​​składnia jest krótsza i prostsza, a tym samym sprawia, że ​​kod staje się czytelny.

Jeśli wierzysz w powyższe zdanie, to zapewniam, że jest to mit. Jeśli się chwilę zastanowić, prawidłowo napisana funkcja z nazwą jest znacznie bardziej czytelna niż tajemnicze funkcje utworzone w jednej linii za pomocą symbolu strzałki.

Głównym zastosowaniem funkcji strzałkowej jest zapewnienie wykonania kodu w kontekście obiektów wywołujących.

Zobacz poniższy kod, który definiuje zmienną globalną „kontekst”. Ta zmienna globalna jest dostępna wewnątrz funkcji „SomeOtherMethod”, która jest wywoływana z innej metody „SomeMethod”.

Ta SomeMethod ma lokalną zmienną kontekstową. Teraz, ponieważ SomeOtherMethod jest wywoływany z „SomeMethod”, spodziewamy się, że wyświetli „kontekst lokalny”, ale wyświetla „kontekst globalny”.

Var kontekst = „kontekst globalny”; funkcja SomeOtherMethod())( alert(this.context); ) funkcja SomeMethod())( this.context = "kontekst lokalny"; SomeOtherMethod(); ) var instancja = nowa SomeMethod();

Ale jeśli zastąpisz wywołanie funkcją strzałki, wyświetli się „kontekst lokalny”.

Var kontekst = „kontekst globalny”;

funkcja SomeMethod())( this.context = "kontekst lokalny"; SomeOtherMethod = () => ( alert(this.context); ) SomeOtherMethod(); ) var instancja = nowa SomeMethod();

Radziłbym przeczytać ten link (funkcja strzałki w JavaScript), który wyjaśnia wszystkie scenariusze kontekstu JavaScript i w jakich przypadkach kontekst osoby wywołującej nie jest przestrzegany. Możesz także zobaczyć wersję demonstracyjną Funkcje strzałek z JavaScriptem w tym filmie na YouTube,

• co praktycznie demonstruje termin Kontekst.

Tłumaczenie

Grube funkcje strzałkowe (=>), zwane także funkcjami strzałkowymi, to zupełnie nowa funkcjonalność w ECMAScript 2015 (wcześniej znanym jako ES6). Jeśli wierzyć plotkom, to w ECMAScript 2015 zaczęto stosować składnię => zamiast –> składni pod wpływem CoffeeScriptu. Również podobieństwo kontekstu przenosi to.

• Straciliśmy funkcję i (), ponieważ nasze funkcje wywołania zwrotnego są zapisane w jednym wierszu.
• Usunęliśmy (). Nie zawijają teraz listy argumentów, gdy obecny jest tylko jeden argument (inne argumenty są traktowane jako wyjątki, np. (...args) => ...).
• Pozbyliśmy się słowa kluczowego return. Usuwając (), umożliwiamy jednoliniowym funkcjom strzałkowym wykonywanie niejawnego powrotu (w innych językach takie funkcje są często nazywane funkcjami lambda).

Jest jednak jedna istotna wada: w jaki sposób usuwając () z funkcji strzałkowych możemy zwrócić pusty obiekt? Na przykład to samo ()?
const pustyObject = () => (); pustyObiekt(); //?
A oto jak wygląda cały kod razem:
funkcja () (zwróć 1; ) () => (zwróć 1; ) () => 1 funkcja (a) ( zwróć a * 2; ) (a) => (zwróć a * 2; ) (a) => a * 2 a => a * 2 funkcja (a, b) ( zwróć a * b; ) (a, b) => ( zwróć a * b; ) (a, b) => a * b funkcja () ( zwróć argumenty; ) (...args) => argumenty () => () // niezdefiniowane () => (()) // ()

• Funkcje z pojedynczymi instrukcjami, które zwracają natychmiast;
• funkcje, które muszą z tym współpracować z zakresem nadrzędnym.