Einführung in die Verwendung von JavaScript-Pfeilfunktionen

In diesem Artikel stellen wir die Vorteile der Pfeilfunktion vor.

Prägnantere Syntax

Lassen Sie uns zunächst die Funktion gemäß der herkömmlichen Syntax definieren:

function funcName(params) {
return params + 2;
}
funcName(2);
// 4

Diese Funktion verwendet Pfeilfunktionen und kann mit nur einer Codezeile ausgeführt werden!

var funcName = (params) => params + 2
funcName(2);
// 4

Ist es nicht cool! Obwohl es sich um ein äußerst prägnantes Beispiel handelt, veranschaulicht es gut die Vorteile von Pfeilfunktionen beim Schreiben von Code. Schauen wir uns die Syntax von Pfeilfunktionen genauer an:
[code ](parameters) => { Statements }[/code]Wenn keine Parameter vorhanden sind, kann es weiter vereinfacht werden:

() => { statements }

Wenn es nur einen Parameter gibt, können Sie die Klammern weglassen:

parameters => { statements }

Wenn der Rückgabewert nur einen Ausdruck (Ausdruck) hat, können Sie dies tun Lassen Sie auch die geschweiften Klammern weg:

parameters => expression
 
// 等价于:
function (parameters){
return expression;
}

Da Sie nun die Syntax von Pfeilfunktionen gelernt haben, üben wir sie. Öffnen Sie die Entwicklerkonsole des Chrome-Browsers und geben Sie Folgendes ein:

var double = num => num * 2

Wir binden die Variable double an eine Pfeilfunktion, die einen Parameter num hat und num * 2 zurückgibt. Rufen Sie diese Funktion auf:

double(2);
// 4
 
double(3);
// 6

Keine lokale this-Bindung
Im Gegensatz zu gewöhnlichen Funktionen binden Pfeilfunktionen this nicht. Mit anderen Worten: Die Pfeilfunktion ändert die ursprüngliche Bindung davon nicht.
Wir verwenden ein Beispiel zur Veranschaulichung:

function Counter() {
this.num = 0;
}
var a = new Counter();

Da zum Konstruieren das Schlüsselwort new verwendet wird, ist dies in der Funktion Count() gebunden ein Neues Objekt und einem zugewiesen. Beim Drucken von a.num über console.log wird 0 ausgegeben.

console.log(a.num);
// 0

Wenn wir den Wert von a.num jede Sekunde um 1 erhöhen wollen, wie erreichen wir das? Sie können die Funktion setInterval() verwenden.

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}

Werfen wir einen Blick auf die Ausgabe:

var b = new Counter();
// NaN
// NaN
// NaN
// ..

Sie werden feststellen, dass jede Sekunde ein NaN ausgedruckt wird und kein kumulierte Zahl. Was ist schief gelaufen?
Verwenden Sie zunächst die folgende Anweisung, um die kontinuierliche Ausführung der setInterval-Funktion zu stoppen:

clearInterval(b.timer);

Versuchen wir zu verstehen, warum der Fehler aufgetreten ist: Zuerst gemäß den im vorherigen Blog erläuterten Regeln Die Funktion setInterval wurde nicht von einem bestimmten Objekt deklariert. Der Objektaufruf verwendet nicht das neue Schlüsselwort und bind, call und apply werden nicht verwendet. setInterval ist nur eine normale Funktion. Tatsächlich ist dies in setInterval an das globale Objekt gebunden. Wir können dies überprüfen, indem wir Folgendes drucken:

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
console.log(this);
}, 1000);
}
var b = new Counter();

Sie werden feststellen, dass das gesamte Fensterobjekt gedruckt wird. Verwenden Sie den folgenden Befehl, um den Druckvorgang zu stoppen:

clearInterval(b.timer);

Zurück zur vorherigen Funktion: Der Grund, warum NaN gedruckt wird, liegt darin, dass this.num an die Anzahl der gebunden ist Fensterobjekt und Fenster .num ist undefiniert.
Wie lösen wir dieses Problem? Benutzen Sie Pfeilfunktionen! Die Verwendung von Pfeilfunktionen führt nicht dazu, dass dies an das globale Objekt gebunden wird.

function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

Diese Bindung durch den Counter-Konstruktor bleibt erhalten. In der setInterval-Funktion zeigt dies immer noch auf unser neu erstelltes b-Objekt.
Um zu überprüfen, was wir gerade gesagt haben, können wir dies in der Counter-Funktion an das binden und dann in setInterval feststellen, ob dies und das gleich sind.

function Counter() {
var that = this;
this.timer = setInterval(() => {
console.log(this === that);
}, 1000);
}
var b = new Counter();
// true
// true
// ...

Wie wir erwartet haben, stimmt der aufgedruckte Wert jedes Mal. Beenden Sie abschließend den Ausdruck des Bildschirms:

clearInterval(b.timer);

Zusammenfassung

1. Der Code zum Schreiben von Pfeilfunktionen hat eine prägnantere Syntax.

2. bindet dies nicht.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von JavaScript-Pfeilfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!