Ausführliche Erklärung der JavaScript-Pfeilfunktion (grafisches Tutorial)

In diesem Artikel werden die Grundkenntnisse der Pfeilfunktionen in Javascript ES6 aus der Sicht eines Anfängers erläutert. Beachten Sie, dass es sich hierbei nicht um Funktionen handelt. )

Um die Lesbarkeit zu gewährleisten, verwendet dieser Artikel eine freie Übersetzung anstelle einer wörtlichen Übersetzung. Darüber hinaus liegt das Urheberrecht dieses Artikels beim ursprünglichen Autor und die Übersetzung dient nur zum Lernen.

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 das 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:
(parameters) => { statements }

Wenn keine Parameter vorhanden sind, kann sie weiter vereinfacht werden:
() => { statements }

Wenn vorhanden Ist nur ein Parameter, können die Klammern weggelassen werden:
parameters => { statements }

Wenn der Rückgabewert nur ein Ausdruck (expression) ist, können Sie auch die geschweiften Klammern weglassen:
parameters => expression

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

Jetzt haben Sie Pfeile gelernt. Lassen Sie uns die Syntax von Funktionen üben. Ö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 Bindung für diese Funktion

Im Gegensatz zu gewöhnlichen Funktionen binden Pfeilfunktionen dies 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, wird dieses in der Count()-Funktion an ein neues Objekt gebunden und einem zugewiesen. Drucken Sie

a.num ，会输出0。 
console.log(a.num);
// 0

über console.log. 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);
}

Sehen wir uns die Ausgabe an:

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

Sie werden feststellen, dass jede Sekunde ein NaN anstelle einer akkumulierten Zahl gedruckt wird. 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: Gemäß den oben erläuterten Regeln Blog, zuerst wurde die Funktion setInterval nicht aufgerufen. Beim Aufrufen eines bestimmten deklarierten Objekts wird das Schlüsselwort new nicht verwendet 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: NaN wird gedruckt, da this.num an die Nummer des Fensterobjekts gebunden ist und window.num undefiniert ist.

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 wird beibehalten. 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 erwartet ist der gedruckte Wert jedes Mal wahr. Beenden Sie abschließend den Ausdruck des Bildschirms:
clearInterval(b.timer);

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue.jsDetaillierte Erläuterung der Berechnung und Verwendung von Listener-Eigenschaften

Zusammenfassung von drei Möglichkeiten zum dynamischen Laden von JS-Dateien

jsZusammenfassung der domänenübergreifenden Methoden, die Post-Anfragen unterstützen

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der JavaScript-Pfeilfunktion (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!