Die Pfeilfunktion ist eine der beliebtesten Updates in ECMascript 6. Sie führt eine neue Syntax ein, um Funktionen mit "Pfeil" (=>) zu definieren, es ist bunziert ~. Die Hauptunterschiede zwischen Pfeilfunktionen und traditionellen JavaScript -Funktionen sind wie folgt:
1. Relevanz dafür. Der Wert davon ist integriert, abhängig davon, wo die Pfeilfunktion definiert ist, nicht im Kontext, in dem die Pfeilfunktion ausgeführt wird.
2.New ist nicht verfügbar. Die Pfeilfunktion kann das neue Schlüsselwort nicht verwenden, um das Objekt zu instanziieren, andernfalls wird ein Fehler gemeldet.
3. Dies ist unveränderlich. Dies ist integriert, um zu funktionieren und eine Konstante in der gesamten Ausführungsumgebung innerhalb des Funktionskörpers.
4. Keine Argumente Objekt. Eingehende Parameter können nicht über das Argumenteobjekt zugegriffen werden. Es kann nur mit explizitem Namen oder anderen neuen ES6 -Funktionen erfolgen.
Die Existenz dieser Unterschiede ist vernünftig. Erstens ist die Bindung daran eine der gemeinsamen Quellen von JavaScript -Fehlern. Es ist leicht, integrierte Funktionswerte von Funktionen zu verlieren oder unerwartete Ergebnisse zu erzielen. Zweitens ist die Begrenzung der Pfeilfunktion auf feste Verwendung dieser Referenz für die Verarbeitung der JavaScript -Engine -Optimierungsoptimierungsfunktion zu fördern.
1. Syntax
Die Syntax einer Pfeilfunktion ist einfach und definiert die unabhängigen Variablen, dann den Pfeil und der Funktionskörper. Unabhängige Variablen und Themen können aufgrund unterschiedlicher Verwendung in einem präziseren Format verwendet werden. Das folgende Beispiel ist eine Pfeilfunktion, die einen Parameter übergibt und einen Wert zurückgibt.
Die Codekopie lautet wie folgt:
var reflect = value => Wert;
// Äquivalent zu:
var reflect = function (value) {
Rückgabewert;
};
Es ist zu sehen, dass Sie einfach einen Parameter schreiben können, indem Sie ihn übergeben, ohne Klammern hinzuzufügen. Der Pfeil zeigt auf den Funktionskörper, aber der Funktionskörper ist nur eine einfache Rückgabeanweisung, sodass keine Zahnspangen hinzugefügt werden müssen. Nachdem die Funktion konstruiert wurde, wird sie zum Nachdenken und Referenz zugewiesen.
Wenn mehrere Parameter übergeben werden müssen, sollten Klammern hinzugefügt werden. Zum Beispiel:
Die Codekopie lautet wie folgt:
var sum = (num1, num2) => num1 + num2;
// Äquivalent zu:
var sum = function (num1, num2) {
return num1 + num2;
};
Die Summe () -Methode besteht darin, zwei Parameter hinzuzufügen und das Ergebnis zurückzugeben. Der einzige Unterschied zum vorherigen Beispiel besteht darin, dass zwei Parameter übergeben werden, sodass sie in Klammern eingeschlossen sein müssen. Es ist wie herkömmliche Funktionen, wobei Kommas in Klammern in Parameter getrennt sind. Wenn die Funktion keine Parameter übergeben muss, sollte sie auch durch leere Klammern ersetzt werden.
Die Codekopie lautet wie folgt: var sum = () => 1 + 2;
// Äquivalent zu:
var sum = function () {
Rückgabe 1 + 2;
};
Wenn Sie einen Standardfunktionskörper verwenden möchten oder möglicherweise mehr Anweisungen in der Funktionsbehörde ausführen können, legen Sie den Funktionskörper in Klammern ein und definieren Sie den Renditewert klar. Zum Beispiel:
Die Codekopie lautet wie folgt:
var sum = (num1, num2) => {return num1 + num2; }
// Äquivalent zu:
var sum = function (num1, num2) {
return num1 + num2;
};
Der Teil der Klammern entspricht im Grunde genommen den herkömmlichen Funktionen, außer dass der Parameter Argumente nicht verfügbar ist.
Weil Zahnspangen das Logo des Körperkörpers sind. Wenn die Pfeilfunktion ein benutzerdefiniertes Objekt zurückgeben möchte, muss sie zuerst das Objekt in Klammern einschließen. Zum Beispiel:
Die Codekopie lautet wie folgt:
var getTeMpitem = id => ({{
ID: ID,
Name: "Temperatur"
});
// Äquivalent zu:
var getTeMpitem = function (id) {
zurückkehren {
ID: ID,
Name: "Temperatur"
};
};
Wie aus dem obigen Beispiel hervorgeht, ist die Verwendung von Klammern für lockige Klammern die Definition des Objekts, nicht der Körper der Funktion.
2. Verwendung
Einer der häufigsten Fehler in JavaScript ist diese Assoziation innerhalb einer Funktion. Da dies den Wert gemäß der aktuellen Ausführungsumgebung der Funktion nimmt, wird dies beim Aufrufen von Missverständnissen verursacht, was zu anderen nicht verwandten Objekten beeinflusst wird. Siehe das folgende Beispiel:
Die Codekopie lautet wie folgt:
var pageHandler = {
ID: "123456",
init: function () {
document.adDeVentListener ("Click", Funktion (Ereignis) {
this.dosomething (Event.Type); // Fehler
}, FALSCH);
},
Dosen etwas: Funktion (Typ) {
console.log ("Handling" + Typ + "für" + this.id);
}
};
In diesem Code besteht die ursprüngliche Absicht darin, die Init () -Methode des PageHandlers zum Erstellen von Interaktionen und zum Aufrufen dieser. Der Code wird jedoch nicht gemäß der ursprünglichen Entwurfsabsicht ausgeführt. Zur Laufzeit zeigt dies auf das globale Objekt anstelle des PageHandlers, was dies verursacht.
Natürlich können Sie Bind () in der Funktion verwenden, um dies explizit mit PageHandler zu verknüpfen, siehe unten:
Die Codekopie lautet wie folgt:
var pageHandler = {
ID: "123456",
init: function () {
document.adDeVentListener ("Click", (Funktion (Ereignis) {
this.dosomething (Event.Type);
}). Bind (this), falsch);
},
Dosen etwas: Funktion (Typ) {
console.log ("Handling" + Typ + "für" + this.id);
}
};
Obwohl es etwas seltsam aussieht, stimmt die Codeausführung jetzt mit den Erwartungen überein. Durch das Aufrufen der Bindung (diese) der Funktion wird eine neue Funktion, die mit dem vorhandenen, das erstellt wurde, zugeordnet wurde, was bedeutet, dass eine andere Schicht enthalten ist, um den Zweck zu erreichen.
Da die Pfeilfunktion diesen Verein bereits unterstützt, wird es hier erfrischender sein, die Pfeilfunktion hier zu verwenden. Siehe das folgende Beispiel:
Die Codekopie lautet wie folgt:
var pageHandler = {
ID: "123456",
init: function () {
document.adDeVentListener ("Click",,
Ereignis => this.dosomething (Ereignis.Type), falsch);
},
Dosen etwas: Funktion (Typ) {
console.log ("Handling" + Typ + "für" + this.id);
}
};
Die Ereignisbearbeitungsfunktion in dieser Instanz fordert die Pfeilfunktion dieses. Der Wert davon ist der Wert dieses Init (). Daher entspricht es Bind ().
Die präzise und prägnante Natur der Pfeilfunktionen macht es auch zu einer idealen Wahl für andere funktionsunabhängige Variablen. Um beispielsweise einen benutzerdefinierten Komparator zu verwenden, um Arrays auf ES5 anzuordnen, finden Sie im folgenden typischen Code:
Die Codekopie lautet wie folgt:
var result = values.sort (Funktion (a, b) {
Rückkehr a - b;
});
Das obige Beispiel verwendet viele Syntax, um einen einfachen Betrieb zu implementieren. Wenn Sie Pfeilfunktionen verwenden, können Sie einen sehr raffinierten Code schreiben:
Die Codekopie lautet wie folgt:
var result = values.sort ((a, b) => a - b);
Die Sortier-/Karte/Reduzierung Methoden der Arrays unterstützen Rückruffunktionen. Die Verwendung von Pfeilfunktionen kann den Schreibvorgang vereinfachen und Ihre Hände freigeben, um das zu tun, was Sie wollen.
3. Ergänzung
Pfeilfunktionen unterscheiden sich in der Tat von traditionellen Funktionen, haben jedoch immer noch gemeinsame Eigenschaften. Zum Beispiel:
1. Typof -Betrieb in der Pfeilfunktion gibt "Funktion" zurück.
2. Die Pfeilfunktion ist immer noch eine Instanz der Funktion, sodass die Ausführungsmethode von Instanz von der der herkömmlichen Funktionen übereinstimmt.
3.call/apply/bind -Methode ist weiterhin für Pfeilfunktionen anwendbar, aber selbst wenn diese Methoden aufgerufen werden, um den aktuellen Bereich zu erweitern, ändert sich dies nicht.
Der größte Unterschied zwischen Pfeilfunktionen und traditionellen Funktionen besteht darin, dass neue Operationen deaktiviert sind.
4. Schlussfolgerung
Die Pfeilfunktion ist ein neues Merkmal von ECMascript 6, das viel Aufmerksamkeit erregt hat und ständig optimiert wird. Es ist ein allgemeiner Trend, eine kurze Grammatik zu verwenden, um den Prozess des Schreibens von Funktionen oder Aussagen zu definieren, und sie werden sicherlich unbesiegbar sein und niemand kann sie aufhalten. Sein Zusammenhang mit dem Schlüsselwort, das Entwickler nicht mehr verärgert und es optimiert, um die Leistung durch JavaScript Engine zu verbessern. Apropos, meine Freunde sind bereits durstig. Wenn Sie die Pfeilfunktion ausprobieren möchten, öffnen Sie einfach die neueste Version von Firefox.