Funkcje strzałek w ES2015 zapewniają bardziej zwięzłą składnię.
- Czy mogę teraz zastąpić wszystkie moje deklaracje / wyrażenia funkcji funkcjami strzałek?
- Na co muszę uważać?
Przykłady:
Funkcja konstruktora
function User(name) {
this.name = name;
}
// vs
const User = name => {
this.name = name;
};
Metody prototypowe
User.prototype.getName = function() {
return this.name;
};
// vs
User.prototype.getName = () => this.name;
Metody obiektowe (dosłowne)
const obj = {
getName: function() {
// ...
}
};
// vs
const obj = {
getName: () => {
// ...
}
};
Callbacki
setTimeout(function() {
// ...
}, 500);
// vs
setTimeout(() => {
// ...
}, 500);
Funkcje Variadic
function sum() {
let args = [].slice.call(arguments);
// ...
}
// vs
const sum = (...args) => {
// ...
};
javascript
ecmascript-6
arrow-functions
Felix Kling
źródło
źródło
this
ma bardzo różnetimesCalled
przyrosty tylko o 1 przy każdym wywołaniu przycisku. Która odpowiada na moje osobiste pytanie:.click( () => { } )
i.click(function() { })
oba tworzą tę samą liczbę funkcji, gdy są używane w pętli, jak widać z liczby Guid w Plnkr.Odpowiedzi:
tl; dr: Nie! Funkcje strzałek oraz deklaracje / wyrażenia funkcji nie są równoważne i nie można ich zastępować na ślepo.
Jeśli funkcja chcesz zastąpić ma nie używać
this
,arguments
a nie jest wywołananew
, to tak.Jak często: to zależy . Funkcje strzałek mają inne zachowanie niż deklaracje / wyrażenia funkcji, więc najpierw spójrzmy na różnice:
1. Leksykalny
this
iarguments
Funkcje strzałek nie mają własnych
this
aniarguments
wiążących. Zamiast tego identyfikatory te są rozwiązywane w zakresie leksykalnym, jak każda inna zmienna. Oznacza to, że wewnątrz funkcji strzałki,this
iarguments
odnoszą się do wartościthis
iarguments
w środowisku funkcja strzałka jest zdefiniowany w (czyli „na zewnątrz”, funkcja strzałka):W przypadku wyrażenia funkcyjnego
this
odnosi się do obiektu, który został utworzony wewnątrzcreateObject
. W przypadku funkcji strzałki,this
odnosi sięthis
odcreateObject
siebie.To sprawia, że funkcje strzałek są przydatne, jeśli chcesz uzyskać dostęp
this
do bieżącego środowiska:Zauważ, że oznacza to również, że nie można ustawić funkcji strzałek za
this
pomocą.bind
lub.call
.Jeśli nie znasz się dobrze
this
, rozważ lekturę2. Nie można wywoływać funkcji strzałek za pomocą
new
ES2015 rozróżnia funkcje, które można wywoływać, i funkcje, które można konstruować . Jeśli funkcja jest konstruowalna, można ją wywołać za pomocą
new
npnew User()
. Jeśli funkcja jest wywoływalna, można ją wywołać beznew
(tzn. Normalne wywołanie funkcji).Funkcje utworzone za pomocą deklaracji / wyrażeń funkcji można konstruować i wywoływać.
Funkcje strzałek (i metody) można wywoływać tylko.
class
konstruktory są tylko do zbudowania.Jeśli próbujesz wywołać funkcję, której nie można wywołać, lub zbudować funkcję, której nie można zbudować, pojawi się błąd czasu wykonywania.
Wiedząc o tym, możemy stwierdzić, co następuje.
Wymienny:
this
lubarguments
..bind(this)
Nie wymienny:
this
)arguments
(patrz poniżej))Przyjrzyjmy się temu na twoich przykładach:
Funkcja konstruktora
To nie zadziała, ponieważ nie można wywoływać funkcji strzałek
new
. Nadal używaj deklaracji / wyrażenia funkcji lub użyjclass
.Metody prototypowe
Najprawdopodobniej nie, ponieważ
this
do uzyskania dostępu do instancji zwykle używają metod prototypowych . Jeśli nie używająthis
, możesz je wymienić. Jeśli jednak zależy ci przede wszystkim na zwięzłej składni, użyjclass
jej zwięzłej metody:Metody obiektowe
Podobnie w przypadku metod w dosłowności obiektu. Jeśli metoda chce odwoływać się do samego obiektu
this
, nadal używaj wyrażeń funkcyjnych lub użyj nowej składni metody:Callbacki
To zależy. Zdecydowanie powinieneś go wymienić, jeśli korzystasz z aliasu zewnętrznego
this
lub używasz.bind(this)
:Ale: Jeśli kod wywołujący wywołanie zwrotne jawnie ustawia
this
określoną wartość, jak to często ma miejsce w przypadku programów obsługi zdarzeń, szczególnie w jQuery, a wywołanie zwrotne używathis
(lubarguments
), nie można użyć funkcji strzałki!Funkcje Variadic
Ponieważ funkcje strzałek nie mają własnych
arguments
, nie można po prostu zastąpić ich funkcją strzałki. Jednak ES2015 wprowadza alternatywę dla używaniaarguments
: parametru rest .Powiązane pytanie:
Dalsze zasoby:
źródło
this
również wpływasuper
i że nie mają.prototype
.AssignmentExpression
) nie może być po prostu umieszczona wszędzie tam, gdzie może wyrazić to wyrażenie funkcji (PrimaryExpression
) i dość często wysyła ludzi (zwłaszcza, że parsowano) błędy w głównych implementacjach JS).() => {}()
) lub zrobienie czegoś podobnegox || () => {}
. Właśnie to mam na myśli: błędy uruchomieniowe (parsowanie). (I chociaż tak jest, dość często ludzie myślą, że błąd jest błędny.) Czy próbujesz tylko ukryć błędy logiczne, które pozostałyby niezauważone, ponieważ niekoniecznie są błędne podczas analizowania lub wykonywania?new
jeden z nich to błąd czasu wykonywania, prawda?Zaczekaj, nie możesz używać funkcji strzałek w całym kodzie, nie będzie działać we wszystkich przypadkach, na przykład gdy
this
funkcje strzałek nie są użyteczne. Bez wątpienia funkcja strzałki jest doskonałym dodatkiem, który zapewnia prostotę kodu.Ale nie można użyć funkcji strzałki, gdy wymagany jest kontekst dynamiczny: definiowanie metod, tworzenie obiektów za pomocą konstruktorów, uzyskiwanie z tego celu celu podczas obsługi zdarzeń.
Funkcje strzałek NIE powinny być używane, ponieważ:
Oni nie mają
this
Używa „zakresu leksykalnego”, aby ustalić, jaka
this
powinna być wartość „ ”. W prostym słowie zakres leksykalny używa „this
” z wnętrza ciała funkcji.Oni nie mają
arguments
Funkcje strzałek nie mają
arguments
obiektu. Ale tę samą funkcjonalność można uzyskać za pomocą parametrów odpoczynku.let sum = (...args) => args.reduce((x, y) => x + y, 0)
sum(3, 3, 1) // output - 7
`Nie można ich używać z
new
Funkcje strzałek nie mogą być konstruktorami, ponieważ nie mają właściwości prototypu.
Kiedy używać funkcji strzałki, a kiedy nie:
map
,reduce
lubforEach
.źródło
arguments
obiekcie, który nie jest dostępny w funkcjach strzałek tutaj: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Aby używać funkcji strzałek z
function.prototype.call
, utworzyłem funkcję pomocnika na prototypie obiektu:stosowanie
Edytować
Nie POTRZEBUJESZ pomocnika. Mógłbyś:
źródło