Wie gehen ES6-Pfeilfunktionen mit dem Schlüsselwort „this' um?

Pfeilfunktionen und die lexikalische Bindung von „this“ in ES6

Eines der charakteristischen Merkmale von Pfeilfunktionen in ES6 ist ihre einzigartige Handhabung des Schlüsselworts „this“. Im Gegensatz zu regulären Funktionen, die „dies“ dynamisch an den Aufrufkontext der Funktion binden, binden Pfeilfunktionen „dies“ lexikalisch an den umschließenden lexikalischen Bereich.

Das bedeutet, dass „dies“ innerhalb einer Pfeilfunktion immer auf das Objekt verweist das die Pfeilfunktionsdefinition enthält. Zum Beispiel:

var testFunction = () => {
  console.log(this);
};

testFunction();

In diesem Code bezieht sich „this“ in der Pfeilfunktion nicht auf die Fettpfeilfunktion selbst, wie Sie vermutet haben. Stattdessen bezieht es sich auf das Objekt, das die Pfeilfunktionsdefinition enthält. Da die Pfeilfunktion im globalen Bereich definiert ist, hat „this“ einen globalen Kontext. Daher ist die Ausgabe des Codes das globale Objekt.

Die lexikalische Bindung ist in Situationen von Vorteil, in denen sich der Wert von „this“ während der Funktionsausführung wahrscheinlich ändert. Betrachten Sie zum Beispiel das folgende Beispiel:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

In diesem Beispiel erfasst die Pfeilfunktion den „this“-Wert des umschließenden Person-Objekts. Dadurch wird sichergestellt, dass die Inkrementierungsoperation immer auf der richtigen Personeninstanz ausgeführt wird, auch wenn der setTimeout-Rückruf asynchron aufgerufen wird und sich der Ausführungskontext geändert hat.

Zusammenfassend lässt sich sagen, dass Pfeilfunktionen in ES6 „this“ lexikalisch an die binden umschließenden lexikalischen Bereich. Dadurch kann „this“ unabhängig vom Aufrufkontext der Funktion auf dasselbe Objekt verweisen, was die Handhabung von „this“ in asynchronen oder verschachtelten Funktionsszenarien erleichtert.

Das obige ist der detaillierte Inhalt vonWie gehen ES6-Pfeilfunktionen mit dem Schlüsselwort „this' um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!