JavaScript-Pfeilfunktion
Pfeilfunktionen wurden in ES6 eingeführt.
Pfeilfunktionen ermöglichen es uns, eine kürzere Funktionssyntax zu schreiben:
let myFunction = (a, b) => a * b;
Vor:
hello = function() {
return "Hello World!";
}
Mit Pfeilfunktion:
hello = () => {
return "Hello World!";
}
Es wird kürzer! Wenn die Funktion nur eine Anweisung hat und die Anweisung einen Wert zurückgibt, können Sie die Klammern und das
returnSchlüsselwort entfernen:
Standardmäßiger Rückgabewert der Pfeilfunktionen:
hello = () => "Hello World!";
Hinweis: Dies funktioniert nur, wenn die Funktion nur eine Anweisung hat.
Wenn Sie Parameter haben, übergeben Sie diese in Klammern:
Pfeilfunktion mit Parametern:
hello = (val) => "Hello " + val;
Wenn Sie nur einen Parameter haben, können Sie die Klammern auch überspringen:
Worum geht es this?
Auch die Handhabung von thisist bei Pfeilfunktionen anders als bei regulären Funktionen.
Kurz gesagt, bei Pfeilfunktionen gibt es keine Bindung von
this.
In regulären Funktionen thisstellt das Schlüsselwort das Objekt dar, das die Funktion aufgerufen hat, was das Fenster, das Dokument, eine Schaltfläche oder was auch immer sein kann.
Bei Pfeilfunktionen repräsentiert das thisSchlüsselwort immer das Objekt, das die Pfeilfunktion definiert hat.
Schauen wir uns zwei Beispiele an, um den Unterschied zu verstehen.
Beide Beispiele rufen eine Methode zweimal auf, zuerst beim Laden der Seite und noch einmal, wenn der Benutzer auf eine Schaltfläche klickt.
Das erste Beispiel verwendet eine reguläre Funktion und das zweite Beispiel eine Pfeilfunktion.
Das Ergebnis zeigt, dass das erste Beispiel zwei verschiedene Objekte (Fenster und Schaltfläche) zurückgibt und das zweite Beispiel das Fensterobjekt zweimal zurückgibt, da das Fensterobjekt der "Besitzer" der Funktion ist.
Beispiel
Mit einer regulären Funktion thisstellt das Objekt dar, das die Funktion aufruft :
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Beispiel
Mit einem Pfeil thisstellt die Funktion den
Eigentümer der Funktion dar:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Denken Sie an diese Unterschiede, wenn Sie mit Funktionen arbeiten. Manchmal ist das Verhalten regulärer Funktionen das, was Sie wollen, wenn nicht, verwenden Sie Pfeilfunktionen.
Browser-Unterstützung
Die folgende Tabelle definiert die ersten Browserversionen mit voller Unterstützung für Pfeilfunktionen in JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |