Wie verhält sich das Schlüsselwort „dieses' in ES6-Pfeilfunktionen anders als bei herkömmlichen Funktionen?

Pfeilfunktionen und dies

In ES6 bieten Pfeilfunktionen eine prägnante Syntax zum Definieren von Funktionen. Ihr Verhalten unterscheidet sich jedoch von herkömmlichen Funktionen in der Art und Weise, wie sie mit dem Schlüsselwort this umgehen.

Beachten Sie den folgenden Code:

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

Hier besteht die Absicht darin, „Mein Name ist Jason“ zu protokollieren, wenn person.shout() wird aufgerufen. Die Ausgabe lautet jedoch „Mein Name ist undefiniert“. Dies liegt daran, dass Pfeilfunktionen keine eigene Bindung haben. Stattdessen erben sie diesen Wert vom umschließenden Bereich.

In diesem Fall ist der umschließende Bereich der globale Bereich, wobei sich dieser auf das Fensterobjekt bezieht. Da das Fensterobjekt keine Namenseigenschaft hat, wird der Ausdruck this.name als undefiniert ausgewertet.

Um dieses Problem zu beheben, können Sie die Tatsache nutzen, dass Pfeilfunktionen dies nicht binden. Indem Sie die Pfeilfunktion direkt in das Objektliteral einfügen, können Sie den korrekten Wert this vom Objekt erben:

var person = {
  name: "jason",
  shout: function() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

Alternativ können Sie eine ES6-Methodendeklaration ohne das Funktionsschlüsselwort und die Syntax :

var person = {
  name: "jason",
  shout() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

Durch die Verwendung dieser Techniken können Sie dies innerhalb von Pfeilfunktionen effektiv nutzen und die gewünschte Ausgabe erzielen.

Das obige ist der detaillierte Inhalt vonWie verhält sich das Schlüsselwort „dieses' in ES6-Pfeilfunktionen anders als bei herkömmlichen Funktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!