Wie gehen Pfeilfunktionen mit dem Schlüsselwort „this' in JavaScript um?

Pfeilfunktionen und „dieses“

In ES6 führen Pfeilfunktionen einen neuen Ansatz zur Methodendefinition ein. Es gibt jedoch einen bemerkenswerten Unterschied zwischen Pfeilfunktionen und herkömmlichen Funktionen, wenn es um den Zugriff auf das Schlüsselwort „this“ geht.

Das Problem:

Bedenken Sie den folgenden Code:

var person = {
  name: "jason",

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

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

Während das beabsichtigte Ergebnis darin besteht, „mein Name ist Jason“ auszugeben, gibt die Konsole nur „mein Name ist“ aus. Dies liegt daran, dass sich Pfeilfunktionen in Bezug auf die „diese“ Bindung anders verhalten als herkömmliche Funktionen.

Die Erklärung:

Im Gegensatz zu herkömmlichen Funktionen binden Pfeilfunktionen die „diese“ Bindung nicht. this'-Schlüsselwort auf den enthaltenden Bereich anwenden. Stattdessen erben sie die „this“-Bindung vom umgebenden Kontext. Im obigen Beispiel bezieht sich das „dies“ in der Pfeilfunktion auf das globale Objekt, nicht auf das Objekt „Person“.

Die Lösung:

Es gibt mehrere Möglichkeiten, dieses Problem anzugehen:

1. Verwenden Sie eine Grenze Funktion:

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

2. Verwenden Sie eine traditionelle Funktion:

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

3. Verwenden ES6-Methodendeklaration:

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};

Von Wenn Sie das unterschiedliche Verhalten von Pfeilfunktionen in Bezug auf „diese“ Bindung verstehen, können Sie effektiven und flexiblen Code in ES6 schreiben.

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