Pfeilfunktionen - bisher am weitesten verbreitetes ES6-Feature...
Verwendung: Alle ES5-Funktionen sollten durch ES6-Pfeilfunktionen ersetzt werden, außer in den folgenden Szenarien:
Pfeilfunktionen sollten nicht verwendet werden:
- Wenn wir Funktionen hoisting möchten
- da Pfeilfunktionen anonym sind.
- Wenn wir
this/arguments in einer Funktion verwenden möchten
- da Pfeilfunktionen kein eigenes
this/arguments haben, sondern sich auf ihren äußeren Kontext verlassen.
- Wenn wir eine benannte Funktion verwenden möchten
- da Pfeilfunktionen anonym sind.
- Wenn wir eine Funktion als
constructor verwenden möchten
- da Pfeilfunktionen kein eigenes
this haben.
- Wenn wir eine Funktion als Eigenschaft in einem Objektliteral hinzufügen möchten und das Objekt darin verwenden möchten
- da wir nicht auf
this (das selbst das Objekt sein sollte) zugreifen können.
Lassen Sie uns einige Varianten von Pfeilfunktionen verstehen, um sie besser zu verstehen:
Variante 1: Wenn wir mehr als ein Argument an eine Funktion übergeben möchten und einen Wert zurückgeben möchten.
ES5-Version:
var multiplizieren = function (a, b) {
return a*b;
};
console.log(multiplizieren(5, 6)); // 30
ES6-Version:
var multiplizierenPfeil = (a, b) => a*b;
console.log(multiplizierenPfeil(5, 6)); // 30
Hinweis:
Das Schlüsselwort function ist nicht erforderlich. => ist erforderlich. {} sind optional, wenn wir keine {} bereitstellen, wird von JavaScript implizit return hinzugefügt und wenn wir {} bereitstellen, müssen wir return hinzufügen, wenn wir es benötigen.
Variante 2: Wenn wir nur ein Argument an eine Funktion übergeben möchten und einen Wert zurückgeben möchten.
ES5-Version:
var verdoppeln = function(a) {
return a*2;
};
console.log(verdoppeln(2)); // 4
ES6-Version:
var verdoppelnPfeil = a => a*2;
console.log(verdoppelnPfeil(2)); // 4
Hinweis:
Beim Übergeben nur eines Arguments können wir die Klammern, (), weglassen.
Variante 3: Wenn wir keine Argumente an eine Funktion übergeben möchten und keinen Wert zurückgeben möchten.
ES5-Version:
var sagenHallo = function() {
console.log("Hallo");
};
sagenHallo(); // Hallo
ES6-Version:
var sagenHalloPfeil = () => {console.log("sagenHalloPfeil");}
sagenHalloPfeil(); // sagenHalloPfeil
Variante 4: Wenn wir explizit von Pfeilfunktionen zurückgeben möchten.
ES6-Version:
var erhöhen = x => {
return x + 1;
};
console.log(erhöhen(1)); // 2
Variante 5: Wenn wir ein Objekt von Pfeilfunktionen zurückgeben möchten.
ES6-Version:
var objektZurückgeben = () => ({a:5});
console.log(objektZurückgeben());
Hinweis:
Wir müssen das Objekt in Klammern, (), einpacken. Andernfalls kann JavaScript nicht zwischen einem Block und einem Objekt unterscheiden.
Variante 6: Pfeilfunktionen haben kein arguments (eine art Arrayobjekt) von sich aus. Sie sind abhängig vom äußeren Kontext für arguments.
ES6-Version:
function foo() {
var abc = i => arguments[0];
console.log(abc(1));
};
foo(2); // 2
Hinweis:
foo ist eine ES5-Funktion, mit einem arguments arrayähnlichen Objekt und ein Argument, das ihm übergeben wird, ist 2, also ist arguments[0] für foo 2.
abc ist eine ES6-Pfeilfunktion, da sie ihr eigenes arguments nicht hat. Daher gibt sie arguments[0] von foo aus ihrem äußeren Kontext aus, anstatt.
Variante 7: Pfeilfunktionen haben kein eigenes this, sie sind abhängig vom äußeren Kontext für this
ES5-Version:
var obj5 = {
greet: "Hallo, Willkommen ",
greetUser : function(user) {
setTimeout(function(){
console.log(this.greet + ": " + user); // "this" hier ist undefiniert.
});
}
};
obj5.greetUser("Katty"); //undefiniert: Katty
Hinweis:
Das an setTimeout übergebene Rückruf ist eine ES5-Funktion und hat sein eigenes this, das in einer use-strict-Umgebung undefiniert ist. Daher erhalten wir die Ausgabe:
undefiniert: Katty
ES6-Version:
var obj6 = {
greet: "Hallo, Willkommen ",
greetUser : function(user) {
setTimeout(() => console.log(this.greet + ": " + user));
// Hier bezieht sich dies auf den äußeren Kontext
}
};
obj6.greetUser("Katty"); // Hallo, Willkommen: Katty
Hinweis:
Das an setTimeout übergebene Rückruf ist eine ES6-Pfeilfunktion und hat kein eigenes this, also nimmt es es aus seinem äußeren Kontext, der greetUser ist, der this hat. Das ist obj6 und daher erhalten wir die Ausgabe:
Hallo, Willkommen: Katty
Verschiedenes:
- Wir können
new nicht mit Pfeilfunktionen verwenden.
- Pfeilfunktionen haben keine
prototype-Eigenschaft.
- Wir haben kein Binden von
this, wenn eine Pfeilfunktion durch apply oder call aufgerufen wird.
