Pfeilfunktionen in ES2015 bieten eine präzisere Syntax.
- Kann ich jetzt alle meine Funktionsdeklarationen / -ausdrücke durch Pfeilfunktionen ersetzen?
- Worauf muss ich achten?
Beispiele:
Konstruktorfunktion
function User(name) {
this.name = name;
}
// vs
const User = name => {
this.name = name;
};
Prototypmethoden
User.prototype.getName = function() {
return this.name;
};
// vs
User.prototype.getName = () => this.name;
Objektmethoden (Literalmethoden)
const obj = {
getName: function() {
// ...
}
};
// vs
const obj = {
getName: () => {
// ...
}
};
Rückrufe
setTimeout(function() {
// ...
}, 500);
// vs
setTimeout(() => {
// ...
}, 500);
Variadische Funktionen
function sum() {
let args = [].slice.call(arguments);
// ...
}
// vs
const sum = (...args) => {
// ...
};
javascript
ecmascript-6
arrow-functions
Felix Kling
quelle
quelle
this
isttimesCalled
bei jedem Aufruf der Schaltfläche nur um 1 sehr unterschiedlich . Was meine persönliche Frage beantwortet:.click( () => { } )
und.click(function() { })
beide erzeugen die gleiche Anzahl von Funktionen, wenn sie in einer Schleife verwendet werden, wie Sie aus der Guid-Anzahl im Plnkr sehen können.Antworten:
tl; dr: Nein! Pfeilfunktionen und Funktionsdeklarationen / -ausdrücke sind nicht äquivalent und können nicht blind ersetzt werden.
Wenn die Funktion, die Sie ersetzen möchten, nicht verwendet
this
wirdarguments
und nicht mit aufgerufen wirdnew
, dann ja.Wie so oft: es kommt darauf an . Pfeilfunktionen haben ein anderes Verhalten als Funktionsdeklarationen / -ausdrücke. Schauen wir uns also zuerst die Unterschiede an:
1. Lexikalisch
this
undarguments
Pfeilfunktionen haben keine eigene
this
oderarguments
Bindung. Stattdessen werden diese Bezeichner wie jede andere Variable im lexikalischen Bereich aufgelöst. Das bedeutet, dass innerhalb einer Pfeilfunktionthis
und unterarguments
Bezugnahme auf die Werte vonthis
undarguments
in der Umgebung die Pfeilfunktion definiert ist (dh "außerhalb" der Pfeilfunktion):this
Bezieht sich im Fall des Funktionsausdrucks auf das Objekt, das innerhalb des Objekts erstellt wurdecreateObject
. In Pfeil Funktion Fallthis
bezieht sich aufthis
voncreateObject
selbst.Dies macht Pfeilfunktionen nützlich, wenn Sie auf
this
die aktuelle Umgebung zugreifen müssen :Beachten Sie, dass dies auch bedeutet, dass es nicht möglich ist, eine Pfeilfunktion
this
mit.bind
oder festzulegen.call
.Wenn Sie nicht sehr vertraut sind
this
, lesen Sie2. Pfeilfunktionen können nicht mit aufgerufen werden
new
ES2015 unterscheidet zwischen Funktionen, die aufrufbar sind , und Funktionen, die konstruierbar sind . Wenn eine Funktion konstruierbar ist, kann sie mit aufgerufen werden
new
, dhnew User()
. Wenn eine Funktion aufrufbar ist, kann sie ohne aufgerufen werdennew
(dh normaler Funktionsaufruf).Durch Funktionsdeklarationen / -ausdrücke erstellte Funktionen sind sowohl konstruierbar als auch aufrufbar.
Pfeilfunktionen (und Methoden) können nur aufgerufen werden.
class
Konstruktoren sind nur konstruierbar.Wenn Sie versuchen, eine nicht aufrufbare Funktion aufzurufen oder eine nicht aufbaubare Funktion zu erstellen, wird ein Laufzeitfehler angezeigt.
In diesem Wissen können wir Folgendes feststellen.
Austauschbar:
this
oder nicht verwendenarguments
..bind(this)
Nicht austauschbar:
this
)arguments
(siehe unten))Schauen wir uns das anhand Ihrer Beispiele genauer an:
Konstruktorfunktion
Dies funktioniert nicht, da Pfeilfunktionen nicht mit aufgerufen werden können
new
. Verwenden Sie weiterhin eine Funktionsdeklaration / einen Funktionsausdruck oder verwenden Sieclass
.Prototypmethoden
Höchstwahrscheinlich nicht, da Prototypmethoden normalerweise
this
für den Zugriff auf die Instanz verwendet werden. Wenn sie nicht verwendenthis
, können Sie es ersetzen. Wenn Sie sich jedoch hauptsächlich für eine prägnante Syntax interessieren, verwenden Sie dieseclass
mit ihrer prägnanten Methodensyntax:Objektmethoden
Ähnliches gilt für Methoden in einem Objektliteral. Wenn die Methode auf das Objekt selbst verweisen möchte
this
, verwenden Sie weiterhin Funktionsausdrücke oder verwenden Sie die neue Methodensyntax:Rückrufe
Es hängt davon ab, ob. Sie sollten es auf jeden Fall ersetzen, wenn Sie das äußere Aliasing verwenden
this
oder Folgendes verwenden.bind(this)
:Aber: Wenn der Code, der den Rückruf aufruft, explizit
this
auf einen bestimmten Wert festgelegt wird, wie dies häufig bei Ereignishandlern, insbesondere bei jQuery, der Fall ist und der Rückrufthis
(oderarguments
) verwendet, können Sie keine Pfeilfunktion verwenden !Variadische Funktionen
Da Pfeilfunktionen keine eigenen haben
arguments
, können Sie sie nicht einfach durch eine Pfeilfunktion ersetzen. ES2015 bietet jedoch eine Alternative zur Verwendungarguments
: den Parameter rest .Verwandte Frage:
Weitere Ressourcen:
quelle
this
auch Auswirkungen hatsuper
und dass sie keine haben.prototype
.AssignmentExpression
) kann nicht einfach überall dort abgelegt werden, wo es ein Funktionsausdruck (PrimaryExpression
) kann, und sie stolpert ziemlich häufig (insbesondere seit dem Parsen) Fehler in wichtigen JS-Implementierungen).() => {}()
) sofort aufzurufen oder so etwas zu tunx || () => {}
. Das meine ich: Laufzeitfehler (Analysefehler). (Und obwohl dies der Fall ist, denken die Leute ziemlich häufig, dass der Fehler fehlerhaft ist.) Versuchen Sie nur, Logikfehler abzudecken, die unbemerkt bleiben würden, weil sie beim Analysieren oder Ausführen nicht unbedingt fehlerhaft sind?new
Ein Fehler ist ein Laufzeitfehler, oder?Warten Sie, Sie können die Pfeilfunktion nicht überall in Ihrem Code verwenden. Sie funktioniert nicht in allen Fällen, in
this
denen Pfeilfunktionen nicht verwendet werden können. Ohne Zweifel ist die Pfeilfunktion eine großartige Ergänzung, die Code-Einfachheit bringt.Sie können jedoch keine Pfeilfunktion verwenden, wenn ein dynamischer Kontext erforderlich ist: Definieren von Methoden, Erstellen von Objekten mit Konstruktoren, Abrufen des Ziels beim Behandeln von Ereignissen.
Pfeilfunktionen sollten NICHT verwendet werden, weil:
Sie haben nicht
this
Es verwendet "lexikalisches Scoping", um herauszufinden, was der Wert von "
this
" sein sollte. Im einfachen Wort lexikalisches Scoping wird "this
" aus dem Inneren des Funktionskörpers verwendet.Sie haben nicht
arguments
Pfeilfunktionen haben kein
arguments
Objekt. Die gleiche Funktionalität kann jedoch mit Ruheparametern erreicht werden.let sum = (...args) => args.reduce((x, y) => x + y, 0)
sum(3, 3, 1) // output - 7
`Sie können nicht mit verwendet werden
new
Pfeilfunktionen können keine Construtoren sein, da sie keine Prototyp-Eigenschaft haben.
Wann und wann nicht?
map
,reduce
oderforEach
.quelle
arguments
Objekt, das in denUm Pfeilfunktionen mit zu verwenden
function.prototype.call
, habe ich eine Hilfsfunktion für den Objektprototyp erstellt:Verwendungszweck
Bearbeiten
Du brauchst keinen Helfer. Du könntest es tun:
quelle