Einführung in die Verwendung von JavaScript-Pfeilfunktionen-js-Tutorial-php.cn

Einführung in die Verwendung von JavaScript-Pfeilfunktionen

巴扎黑

Freigeben： 2017-08-16 11:05:25

Original

3061 Leute haben es durchsucht

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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 }

Nach dem Login kopieren

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

parameters => { statements }

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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();

Nach dem Login kopieren

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

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

Werfen wir einen Blick auf die Ausgabe:

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

Nach dem Login kopieren

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);

Nach dem Login kopieren

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();

Nach dem Login kopieren

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

clearInterval(b.timer);

Nach dem Login kopieren

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
// ...

Nach dem Login kopieren

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
// ...

Nach dem Login kopieren

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

clearInterval(b.timer);

Nach dem Login kopieren

Zusammenfassung

Der Code zum Schreiben von Pfeilfunktionen hat eine prägnantere Syntax.
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!