Pfeilfunktionen sind eines der am meisten diskutierten Updates in ECMAScript 6. Es führt eine neue Syntax zum Definieren von Funktionen mithilfe von „Pfeilen“ (=>) ein, was ... erstaunlich ist. Die Hauptunterschiede zwischen Pfeilfunktionen und herkömmlichen JavaScript-Funktionen sind die folgenden Punkte:
1. Der Wert davon innerhalb einer Funktion hängt davon ab, wo die Pfeilfunktion definiert ist, nicht vom Kontext, in dem die Pfeilfunktion ausgeführt wird.
2.neu ist nicht verfügbar. Pfeilfunktionen können das Schlüsselwort new nicht zum Instanziieren von Objekten verwenden, andernfalls wird ein Fehler gemeldet.
3.das ist unveränderlich. Das eingebaute This der Funktion ist unveränderlich und bleibt in der gesamten Ausführungsumgebung des Funktionskörpers konstant.
4. Es gibt kein Argumentobjekt. Auf eingehende Parameter kann nicht über das Argumentobjekt zugegriffen werden. Dies kann nur durch explizite Benennung oder andere neue ES6-Funktionen erfolgen.
Diese Unterschiede sind berechtigt. Erstens ist die Bindung daran eine der häufigsten Ursachen für JavaScript-Fehler. Es ist leicht, den Wert der integrierten Funktion zu verlieren oder unerwartete Ergebnisse zu erhalten. Zweitens ist die Beschränkung der Pfeilfunktionen auf die Verwendung fester this-Referenzen für die Optimierung der JavaScript-Engine von Vorteil.
1. Grammatik
Die Syntax der Pfeilfunktion ist sehr einfach: Definieren Sie die unabhängige Variable, dann den Pfeil und den Funktionskörper. Die unabhängigen Variablen und Themen können je nach Verwendung ein prägnanteres Format haben. Im folgenden Beispiel wird eine Pfeilfunktion verwendet, die einen Parameter übergibt und einen Wert zurückgibt.
var reflektieren = Wert =>
// Äquivalent zu:
var reflektieren = Funktion(Wert) {
Rückgabewert;
};
Wie Sie sehen, schreiben Sie einen Parameter, wenn Sie ihn übergeben, einfach direkt, ohne Klammern hinzuzufügen. Der Pfeil zeigt auf den Funktionskörper, aber der Funktionskörper ist nur eine einfache Return-Anweisung, sodass keine geschweiften Klammern hinzugefügt werden müssen. Nachdem die Funktion erstellt wurde, wird sie der Reflektion als Referenz zugewiesen.
Wenn Sie mehrere Parameter übergeben müssen, sollten Sie Klammern hinzufügen. Zum Beispiel:
var sum = (num1, num2) = > num1 num2;
// Äquivalent zu:
var sum = function(num1, num2) {
return num1 num2;
};
Die Methode sum() fügt zwei Parameter hinzu und gibt das Ergebnis zurück. Der einzige Unterschied zum vorherigen Beispiel besteht darin, dass zwei Parameter übergeben werden, die also in Klammern eingeschlossen sind. Es ist dasselbe wie bei einer herkömmlichen Funktion, wobei die in Klammern übergebenen Parameter durch Kommas getrennt werden. Wenn die Funktion keine Parameter erfordert, sollten stattdessen leere Klammern verwendet werden.
var sum = () => 🎜>/ / Entspricht:
var sum = function() {
return 1 2;
};
Wenn Sie einen Standard-Funktionskörper verwenden möchten oder im Funktionskörper weitere Anweisungen ausgeführt werden müssen, schließen Sie den Funktionskörper in geschweifte Klammern ein und definieren Sie den Rückgabewert klar. Zum Beispiel:
var sum = (num1, num2) => ; { return num1 num2;
Der Teil in den geschweiften Klammern entspricht grundsätzlich der herkömmlichen Funktion, außer dass der Argumentparameter nicht verfügbar ist.
Weil die geschweiften Klammern die Symbole des Funktionskörpers sind. Wenn die Pfeilfunktion ein benutzerdefiniertes Objekt zurückgeben möchte, muss das Objekt in Klammern eingeschlossen werden. Zum Beispiel:
Code kopieren
Der Code lautet wie folgt:
var getTempItem = function(id) {
return {
id: id,
Name: „Temp“
};
};
Wie aus dem obigen Beispiel ersichtlich ist, ist die Verwendung von Klammern zum Einfügen von geschweiften Klammern die Definition des Objekts und nicht der Hauptteil der Funktion.
2. Verwendung
Einer der häufigsten Fehler in JavaScript ist diese Verknüpfung innerhalb von Funktionen. Da dieser Wert auf der aktuellen Ausführungsumgebung der Funktion basiert, kommt es während des Aufrufs zu Missverständnissen, die sich auf andere, nicht verwandte Objekte auswirken. Siehe das Beispiel unten:
var PageHandler = {
id: "123456" ,
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // error
}, false );
},
doSomething: function(type) {
console.log("Handling " type " for " this.id);
}
};
In diesem Code besteht die ursprüngliche Absicht darin, die init()-Methode von PageHandler zum Erstellen von Interaktionen zu verwenden und this.doSomething() in der Click-Event-Handling-Funktion aufzurufen. Der Code wurde jedoch nicht gemäß der ursprünglichen Entwurfsabsicht ausgeführt, da dies auf das globale Objekt und nicht auf den PageHandler verwies, was dazu führte, dass der Aufruf von this.doSomething() ungültig war und ein Fehler gemeldet wurde, da dies bei der Methode doSomething nicht der Fall war existieren im globalen Objekt.
Natürlich können Sie bind() in der Funktion verwenden, um dies eindeutig dem PageHandler zuzuordnen, siehe unten:
var PageHandler = {
id: "123456",
init: function() {
document. addEventListener("click" , (function(event) {
This.doSomething(event.type);
}).bind(this), false);
},
doSomething : function(type) {
console.log("Handling " type " for " this.id); Durch den Aufruf von bind(this) der Funktion wird eine neue Funktionsrückgabe erstellt, die mit dem vorhandenen this verknüpft ist, was bedeutet, dass eine zusätzliche Ebene umschlossen wird, um den Zweck zu erreichen.
Da die Pfeilfunktion diese Zuordnung bereits unterstützt, ist es bequemer, die Pfeilfunktion hier zu verwenden. Siehe das folgende Beispiel:
Code kopieren
init: function() {
document.addEventListener("click ",
event = > this.doSomething(event.type), false);
},
doSomething: function(type) {
console. log("Handling " type " for " this.id);
}
};
Die Ereignisbehandlungsfunktion in diesem Beispiel ruft die Pfeilfunktion von this.doSomething() auf. Der Wert davon ist der this-Wert in init(). Daher entspricht es bind().
Die prägnante und prägnante Natur der Pfeilfunktion macht sie auch zu einer idealen Wahl für Argumente anderer Funktionen. Wenn Sie beispielsweise einen benutzerdefinierten Komparator verwenden möchten, um ein Array auf ES5 zu sortieren, lautet der typische Code wie folgt:
Kopieren Sie den Code
Das obige Beispiel verwendet viel Syntax, um eine einfache Operation zu implementieren. Wenn Sie Pfeilfunktionen verwenden, können Sie sehr prägnanten Code schreiben:
Kopieren Sie den Code
Der Code lautet wie folgt:var result = Values.sort((a, b) => a - b);
Array-Sortierung/Zuordnung/Reduzierung und andere Methoden unterstützen alle Rückruffunktionen. Die Verwendung von Pfeilfunktionen kann den Schreibvorgang vereinfachen und Ihre Hände frei machen, um das zu tun, was Sie tun möchten.
3. Ergänzung
Pfeilfunktionen unterscheiden sich zwar von herkömmlichen Funktionen, weisen jedoch dennoch gemeinsame Merkmale auf. Beispiel:
1. Der Operationstyp für die Pfeilfunktion gibt „Funktion“ zurück.
2. Die Pfeilfunktion ist immer noch eine Instanz von Function, daher stimmt die Ausführungsmethode von instanceof mit der herkömmlichen Funktion überein.
3. Die Methode call/apply/bind ist weiterhin auf Pfeilfunktionen anwendbar, aber selbst wenn diese Methoden aufgerufen werden, um den aktuellen Bereich zu erweitern, ändert sich daran immer noch nichts.
Der größte Unterschied zwischen Pfeilfunktionen und herkömmlichen Funktionen besteht darin, dass der neue Vorgang deaktiviert ist.
4. Fazit
Die Pfeilfunktion ist eine neue Funktion von ECMAScript 6, die viel Aufmerksamkeit erregt hat und noch optimiert wird. Die Verwendung kurzer Syntax zum Definieren von Funktionen oder Anweisungen zum Schreiben von Prozessen ist der allgemeine Trend. Sie werden zwangsläufig explodieren und niemand kann sie stoppen. Die Verknüpfung mit dem Schlüsselwort entlastet Entwickler und hilft, die Leistung durch JavaScript-Engine-Optimierung zu verbessern. Allerdings haben Freunde jetzt schon Durst nach ihren Schwertern. Wenn Sie die Pfeilfunktion ausprobieren möchten, öffnen Sie einfach die neueste Version von Firefox.
