Wiem, że >=
operator oznacza więcej lub więcej, ale widziałem =>
w jakimś kodzie źródłowym. Jakie jest znaczenie tego operatora?
Oto kod:
promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
if (!aDialogAccepted)
return;
saveAsType = fpParams.saveAsType;
file = fpParams.file;
continueSave();
}).then(null, Components.utils.reportError);
javascript
syntax
ecmascript-6
arrow-functions
rpgs_player
źródło
źródło
Odpowiedzi:
Co to jest
To jest funkcja strzałki. Funkcje strzałek to krótka składnia wprowadzona przez ECMAscript 6, której można używać podobnie jak w wyrażeniach funkcyjnych. Innymi słowy, często możesz ich używać zamiast wyrażeń takich jak
function (foo) {...}
. Ale mają kilka ważnych różnic. Na przykład nie wiążą własnych wartościthis
(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 zamieszczam częściową listę obsługiwanych przeglądarek).
Możesz przeczytać więcej w dokumentacji Mozilli na temat funkcji strzałek .
Z dokumentacji Mozilli:
Uwaga na temat
this
działania funkcji strzałekJedna z najbardziej przydatnych funkcji funkcji strzałki jest ukryta w powyższym tekście:
Mówiąc prościej, oznacza to, że funkcja strzałki zachowuje
this
wartość z kontekstu i nie ma własnej wartościthis
. Tradycyjna funkcja może powiązać własnąthis
wartość, w zależności od tego, jak zostanie zdefiniowana i wywołana. Może to wymagać wielu ćwiczeń gimnastycznych, takich jakself = this;
itp., Aby uzyskać dostęp dothis
jednej funkcji w innej funkcji lub manipulować nią . Aby uzyskać więcej informacji na ten temat, zobacz wyjaśnienie i przykłady w dokumentacji Mozilli .Przykładowy kod
Przykład (również z dokumentów):
Uwagi na temat zgodności
Możesz używać funkcji strzałek w Węźle, ale obsługa przeglądarki jest nierówna.
Obsługa tej funkcji znacznie się poprawiła, ale wciąż nie jest wystarczająco rozpowszechniona w przypadku większości zastosowań opartych na przeglądarce. Od 12 grudnia 2017 r. Jest obsługiwany w bieżących wersjach:
Nieobsługiwany w:
Więcej (i więcej aktualnych) informacji można znaleźć na CanIUse.com (bez powiązania).
źródło
Jest to znane jako funkcja strzałki, część specyfikacji ECMAScript 2015 ...
Krótsza składnia niż poprzednia:
PRÓBNY
Inną niesamowitą rzeczą jest leksykalna
this
... Zazwyczaj robiłbyś coś takiego:Ale można to przepisać za pomocą strzałki:
PRÓBNY
MDN
Więcej na temat składni
Aby uzyskać więcej, oto całkiem dobra odpowiedź na pytanie, kiedy używać funkcji strzałek.
źródło
Byłoby to „wyrażenie funkcji strzałki” wprowadzone w ECMAScript 6.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions
Dla celów historycznych (jeśli strona wiki zmieni się później), jest to:
źródło
Są to funkcje strzałek
Znany również jako Funkcje Fat Arrow . Są czystym i spójnym sposobem pisania wyrażeń funkcyjnych, np
function() {}
.Funkcje strzałek można usunąć potrzebę
function
,return
a{}
przy definiowaniu funkcji. Są one jednowierszowe, podobne do wyrażeń Lambda w Javie lub Pythonie.Przykład bez parametrów
Jeśli konieczne jest wykonanie wielu instrukcji w ramach tej samej funkcji strzałki, w tym przykładzie należy owinąć
queue[0]
nawiasy klamrowe{}
. W takim przypadku instrukcja return nie może zostać pominięta.Przykład z 1 parametrem
Możesz pominąć
{}
powyższe.Gdy występuje pojedynczy parametr, nawiasy
()
wokół parametru można pominąć.Przykład z wieloma parametrami
Przydatny przykład
Gdybyśmy chcieli uzyskać cenę każdego owocu w jednej tablicy, w ES5 moglibyśmy zrobić:
W ES6 dzięki nowym funkcjom strzałek możemy uczynić to bardziej zwięzłym:
Dodatkowe informacje na temat funkcji strzałek można znaleźć tutaj .
Kompatybilność z przeglądarkami
Dodatkowe aktualne informacje można znaleźć na temat zgodności przeglądarki tutaj
źródło
aby dodać kolejny przykład tego, co lambda może zrobić bez użycia mapy:
źródło
Jak powiedzieli inni, jest to nowa składnia do tworzenia funkcji.
Jednak tego rodzaju funkcje różnią się od normalnych:
Wiążą
this
wartość. Jak wyjaśniono w specyfikacji ,Nie są konstruktorami.
Oznacza to, że nie mają metody [[Construct]] i dlatego nie można ich utworzyć, np
źródło
Czytałem, to jest symbol
Arrow Functions
wES6
to
za pomocą
Arrow Function
można zapisać jakoDokumenty MDN
źródło
Dodanie prostego przykładu CRUD za pomocą Arrowfunction
źródło
Niezadowolony z innych odpowiedzi. Najczęściej głosowana odpowiedź na dzień 2019/3/13 jest nieprawdziwa.
Krótka wersja tego, co
=>
oznacza, jest skrótem piszącym funkcję ORAZ do wiązania jej z bieżącymthis
Jest skutecznie skrótem do
Możesz zobaczyć wszystkie rzeczy, które zostały skrócone. My nie potrzebujemy
function
, anireturn
też nie.bind(this)
ani nawet szelki lub nawiasyNieco dłuższy przykład funkcji strzałki może być
Pokazując, że jeśli chcemy wielu argumentów funkcji, potrzebujemy nawiasów, a jeśli chcemy zapisać więcej niż jedno wyrażenie, potrzebujemy nawiasów klamrowych i jawnych
return
.Ważne jest, aby zrozumieć tę
.bind
część i jest to duży temat. Ma to związek z tym, cothis
oznacza JavaScript.WSZYSTKIE funkcje mają niejawny parametr o nazwie
this
. Sposóbthis
ustawiania podczas wywoływania funkcji zależy od sposobu jej wywołania.Brać
Jeśli zadzwonisz normalnie
this
będzie obiektem globalnym.Jeśli jesteś w trybie ścisłym
To będzie
undefined
Możesz ustawić
this
bezpośrednio za pomocącall
lubapply
Możesz także ustawić
this
domyślnie za pomocą operatora kropki.
Pojawia się problem, gdy chcesz użyć funkcji jako wywołania zwrotnego lub detektora. Tworzysz klasę i chcesz przypisać funkcję jako wywołanie zwrotne, które uzyskuje dostęp do instancji klasy.
Powyższy kod nie będzie działał, ponieważ gdy element uruchamia zdarzenie i wywołuje funkcję,
this
wartość nie będzie instancją klasy.Jednym z powszechnych sposobów rozwiązania tego problemu jest użycie
.bind
Ponieważ składnia strzały robi to samo, co możemy napisać
bind
skutecznie tworzy nową funkcję . Gdybybind
nie istniał, można w zasadzie stworzyć taki własnyW starszym JavaScript bez operatora rozprzestrzeniania byłoby to
Zrozumienie tego kodu wymaga zrozumienia zamknięć, ale krótka wersja stanowi
bind
nową funkcję, która zawsze wywołuje funkcję oryginalną zthis
wartością, która była z nią związana. Funkcja strzałki robi to samo, ponieważ są skrótem dobind(this)
źródło
Jak już wspomniano wszystkie pozostałe odpowiedzi, jest to część składni funkcji strzałek ES2015. Bardziej szczegółowo, nie jest operator, to punctuator token oddziela parametrów z organizmu:
ArrowFunction : ArrowParameters => ConciseBody
. Np(params) => { /* body */ }
.źródło
ES6
Funkcje strzałek:W javascript
=>
jest to symbol wyrażenia funkcji strzałki. Wyrażenie funkcji strzałki nie ma własnegothis
wiązania i dlatego nie może być użyte jako funkcja konstruktora. na przykład:Zasady korzystania z funkcji strzałek:
{}
, areturn
oświadczenieNa przykład:
źródło
Funkcje strzałek oznaczone symbolem (=>) pomagają tworzyć anonimowe funkcje i metody. To prowadzi do krótszej składni. Na przykład poniżej znajduje się prosta funkcja „Dodaj”, która zwraca dodanie dwóch liczb.
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 schemacie:
Dane wejściowe: - Ta sekcja określa parametry wejściowe funkcji anonimowej.
Logika: - Ta sekcja występuje po symbolu „=>”. Ta sekcja ma logikę rzeczywistej funkcji.
Wielu programistów uważa, że funkcja strzałki sprawia, że twoja składnia jest krótsza, prostsza, a tym samym twój kod jest czytelny.
Jeśli wierzysz w powyższe zdanie, to zapewniam cię, że to mit. Jeśli przez chwilę myślisz, że poprawnie napisana funkcja o nazwie jest znacznie czytelniejsza niż funkcje tajemnicze utworzone w jednym wierszu za pomocą symbolu strzałki.
Zobacz poniższy kod, w którym zdefiniowano zmienną globalną „kontekst”. Dostęp do tej zmiennej globalnej można uzyskać w funkcji „SomeOtherMethod”, która jest wywoływana z innej metody „SomeMethod”.
Ta „SomeMethod” ma lokalną zmienną „kontekst”. Ponieważ „SomeOtherMethod” jest wywoływany z „SomeMethod”, spodziewamy się, że wyświetli „kontekst lokalny”, ale wyświetla „kontekst globalny”.
Ale jeśli zastąpisz połączenie za pomocą funkcji strzałki, wyświetli się „kontekst lokalny”.
Zachęcam do przeczytania tego linku ( funkcja strzałki w JavaScript ), który wyjaśnia wszystkie scenariusze kontekstu javascript i w których scenariuszach kontekst dzwoniącego nie jest przestrzegany.
Demonstracja funkcji strzałki z javascript w tym filmie na youtube pokazuje praktycznie termin Kontekst.
źródło
Jak powiedzieli inni, zwykłe (tradycyjne) funkcje korzystają
this
z obiektu, który wywołał funkcję (np. Kliknięty przycisk) . Zamiast tego funkcje strzałek używająthis
obiektu definiującego funkcję.Rozważ dwie prawie identyczne funkcje:
Poniższy fragment
this
kodu pokazuje podstawową różnicę między tym, co reprezentuje każdą funkcję. W zwykłej funkcji wyjścia[object HTMLButtonElement]
Zważywszy, że funkcja strzałka wyjść[object Window]
.źródło