Warum funktioniert „das' in ES6-Pfeilfunktionen nicht wie erwartet?

Pfeilfunktionen und dies

Beim Einbinden von Eigenschaften in Funktionen mit ES6 tritt ein Problem auf, wenn versucht wird, auf dieses Objekt zuzugreifen.

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

Beim Ausführen dieses Codes wird jedoch nicht der beabsichtigte Name angezeigt, sondern nur „mein Name ist“. Dieses Problem ist auf das einzigartige Verhalten von Pfeilfunktionen zurückzuführen.

Pfeilfunktionen fehlen dies, Argumente oder andere spezielle Namen. Wenn ein Objekt erstellt wird, befindet es sich im umschließenden Bereich und nicht innerhalb des Objekts. Durch die Untersuchung des Codes in diesen Variationen wird das Problem deutlicher:

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

und bei der Übersetzung in eine vage Annäherung an die Pfeilsyntax in ES5:

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

In beiden Fällen , dies verweist für die Shout-Funktion auf den Bereich, in dem die Person definiert ist, und nicht auf den neuen Bereich, der mit dem Objekt verknüpft ist, wenn es hinzugefügt wird Person.

Während Pfeilfunktionen das beabsichtigte Verhalten nicht reproduzieren können, bietet ES6 eine alternative Lösung, indem es Methodendeklarationsmuster verwendet, um Platz zu sparen:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leaving off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

Das obige ist der detaillierte Inhalt vonWarum funktioniert „das' in ES6-Pfeilfunktionen nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!