In diesem Tutorial lernen Sie anhand von Beispielen die JavaScript-Pfeilfunktion kennen.
Die Pfeilfunktion ist eine der Funktionen, die in der ES6-Version von JavaScript eingeführt wurden. Sie können damit Funktionen im Vergleich zu regulären Funktionen sauberer erstellen. Zum Beispiel
diese Funktion
// function expression let x = function(x, y) ( return x * y; )
kann geschrieben werden als
// using arrow functions let x = (x, y) => x * y;
mit einer Pfeilfunktion.
Pfeilfunktionssyntax
Die Syntax der Pfeilfunktion lautet:
let myFunction = (arg1, arg2,… argN) => ( statement(s) )
Hier,
myFunctionist der Name der Funktionarg1, arg2,… argNsind die Funktionsargumentestatement(s)ist der Funktionskörper
Wenn der Text eine einzelne Anweisung oder einen einzelnen Ausdruck enthält, können Sie die Pfeilfunktion wie folgt schreiben:
let myFunction = (arg1, arg2,… argN) => expression
Beispiel 1: Pfeilfunktion ohne Argument
Wenn eine Funktion kein Argument akzeptiert, sollten Sie leere Klammern verwenden. Beispielsweise,
let greet = () => console.log('Hello'); greet(); // Hello
Beispiel 2: Pfeilfunktion mit einem Argument
Wenn eine Funktion nur ein Argument hat, können Sie die Klammern weglassen. Beispielsweise,
let greet = x => console.log(x); greet('Hello'); // Hello
Beispiel 3: Pfeilfunktion als Ausdruck
Sie können eine Funktion auch dynamisch erstellen und als Ausdruck verwenden. Beispielsweise,
let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby
Beispiel 4: Mehrzeilige Pfeilfunktionen
Wenn ein Funktionskörper mehrere Anweisungen enthält, müssen Sie diese in geschweifte Klammern setzen (). Beispielsweise,
let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12
dies mit Pfeilfunktion
Innerhalb einer regulären Funktion bezieht sich dieses Schlüsselwort auf die Funktion, in der es aufgerufen wird.
Ist thisjedoch nicht mit Pfeilfunktionen verbunden. Die Pfeilfunktion hat keine eigene this. Wenn Sie also anrufen this, bezieht es sich auf den übergeordneten Bereich. Beispielsweise,
Innerhalb einer regulären Funktion
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();
Ausgabe
25 undefiniertes Fenster ()
Hier ist this.ageinnen this.sayName()zugänglich, weil this.sayName()es sich um die Methode eines Objekts handelt.
Dies innerFunc()ist jedoch eine normale Funktion und this.agenicht zugänglich, da sie thissich auf das globale Objekt bezieht (Fensterobjekt im Browser). Daher gibt this.ageinnerhalb der innerFunc()Funktion undefined.
Innerhalb einer Pfeilfunktion
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();
Ausgabe
25 25
Hier wird die innerFunc()Funktion mit der Pfeilfunktion definiert. Und thisbezieht sich innerhalb der Pfeilfunktion auf den Bereich der Eltern. Daher this.agegibt 25 .
Argumente Bindung
Reguläre Funktionen haben Argumente verbindlich. Wenn Sie Argumente an eine reguläre Funktion übergeben, können Sie daher mit dem argumentsSchlüsselwort darauf zugreifen . Beispielsweise,
let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)
Pfeilfunktionen haben keine verbindlichen Argumente.
Wenn Sie versuchen, mit der Pfeilfunktion auf ein Argument zuzugreifen, wird ein Fehler ausgegeben. Beispielsweise,
let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments
Um dieses Problem zu lösen, können Sie die Spread-Syntax verwenden. Beispielsweise,
let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)
Pfeilfunktion mit Versprechungen und Rückrufen
Pfeilfunktionen bieten eine bessere Syntax zum Schreiben von Versprechungen und Rückrufen. Beispielsweise,
// ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));
kann geschrieben werden als
// ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);
Dinge, die Sie mit Pfeilfunktionen vermeiden sollten
1. Sie sollten keine Pfeilfunktionen verwenden, um Methoden in Objekten zu erstellen.
let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined
2. Sie können keine Pfeilfunktion als Konstruktor verwenden . Beispielsweise,
let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor
Hinweis : In ES6 wurden Pfeilfunktionen eingeführt . Einige Browser unterstützen möglicherweise nicht die Verwendung von Pfeilfunktionen. Weitere Informationen finden Sie unter Unterstützung der JavaScript-Pfeilfunktion.
