Detaillierte Erläuterung der JavaScript-Pfeilfunktion

In diesem Artikel werden die Grundkenntnisse der Javascript-Pfeil--Funktion (Pfeilfunktionen) in ES6 aus der Sicht eines Anfängers erläutert. ES6 kann „Pfeil“ zum Definieren von Funktionen verwenden . Beachten Sie, dass es sich um eine Funktion handelt. Verwenden Sie diese Methode nicht zum Definieren einer Klasse (Konstruktor).

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 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:

(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(Ausdruck) ist, können Sie auch die geschweiften Klammern weglassen:
parameters => expression

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

Da Sie nun die Syntax von Pfeilfunktionen gelernt haben, üben wir sie. Öffnen Sie die Browser-Entwicklerkonsole

Chrome und geben Sie Folgendes ein:

var double = num => num * 2

Wir binden die

Variable double an eine Pfeilfunktion, die eine Parameternummer hat , gibt num * 2 zurück. Rufen Sie diese Funktion auf:

double(2);
// 4

double(3);
// 6

Keine lokale Bindung von this

Im Gegensatz zu gewöhnlichen Funktionen binden Pfeilfunktionen dies nicht. Mit anderen Worten: Die Pfeilfunktion ändert die ursprüngliche Bindung davon nicht.

Lassen Sie uns ein Beispiel zur Veranschaulichung verwenden:

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 a zugeordnet. 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 möchten, 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:

<a href="http://www.php.cn/wiki/917.html" target="_blank"> klar<br>Interval(b.timer);</a><a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>Interval(b.timer);

Versuchen wir zu verstehen, warum der Fehler aufgetreten ist: Gemäß den im vorherigen Blog erläuterten Regeln zunächst die Funktion setInterval wurde weder von einem deklarierten Objekt aufgerufen, noch wird das Schlüsselwort new nicht verwendet, und bind, c

all 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 durch den Counter-

-Konstruktor gebundene Funktion 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 aufgedruckte Wert jedes Mal wahr. Beenden Sie abschließend den Ausdruck des Bildschirms:

clearInterval(b.timer);

Zusammenfassung

1. Die Pfeilfunktion verfügt über eine prägnantere Syntax zum Schreiben von Code

2. Dies wird nicht gebunden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Pfeilfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!