Wie wirkt sich die lexikalische Bindung auf das Schlüsselwort „this' in ES6-Pfeilfunktionen aus?

Verstehen der lexikalischen Bindung von „this“ in ES6-Pfeilfunktionen

Im Bereich von JavaScript führen Pfeilfunktionen zu einer subtilen, aber wirkungsvollen Änderung in der Art und Weise, wie „this“ Schlüsselwort verhält sich. Im Gegensatz zu herkömmlichen Funktionsdeklarationen weisen Pfeilfunktionen eine lexikalische Bindung auf, ein Konzept, das den Wert von „diesem“ innerhalb ihres Geltungsbereichs regelt.

Was ist lexikalische Bindung?

Lexikalische Bindung bezieht sich auf den Mechanismus, bei dem der Wert von „this“ durch die lexikalische Umgebung der Funktion bestimmt wird, also den Bereich, in dem die Funktion definiert ist. Im Gegensatz dazu verwenden herkömmliche Funktionen eine dynamische Bindung, bei der der Wert von „this“ durch den Aufruferkontext bestimmt wird, auch wenn die Funktion innerhalb eines äußeren Bereichs definiert ist.

Auswirkungen auf Pfeilfunktionen

Pfeilfunktionen sind lexikalisch gebunden, das heißt, sie erben den „this“-Wert aus ihrem umgebenden Kontext. Vereinfacht ausgedrückt bezieht sich „dies“ innerhalb einer Pfeilfunktion immer auf das Objekt, das die Pfeilfunktionsdefinition enthält.

Beispiel

Betrachten Sie den folgenden Codeausschnitt:

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

In diesem Beispiel bezieht sich „this“ in der Pfeilfunktion auf das globale Objekt (Fenster in einem Browser). Dies liegt daran, dass die Pfeilfunktion innerhalb des globalen Bereichs definiert ist und den „this“-Wert dieses Bereichs erbt.

Im Gegensatz zu traditionellen Funktionen

Traditionelle Funktionsdeklarationen, on Verwenden Sie andererseits die dynamische Bindung. Wenn eine herkömmliche Funktion innerhalb eines Objekts definiert ist, bezieht sich „dies“ auf dieses Objekt, wenn die Funktion aufgerufen wird, unabhängig vom aufrufenden Kontext.

Zum Beispiel zeigt das folgende Codefragment die dynamische Bindung:

var person = {
  name: 'John',
  greet: function() {
    console.log(this.name)
  }
};
person.greet(); // logs 'John'

Wenn wir im Gegensatz dazu eine Pfeilfunktion für die Begrüßungsmethode verwenden:

var person = {
  name: 'John',
  greet: () => {
    console.log(this.name)
  }
};
person.greet(); // logs undefined

Da die Pfeilfunktion lexikalisch gebunden ist, ist „dies“ bezieht sich auf das globale Objekt und nicht auf das Personenobjekt, was zu einer undefinierten Ausgabe führt.

Anwendungen der lexikalischen Bindung

Die lexikalische Bindung von „this“ in Pfeilfunktionen ist von Bedeutung Auswirkungen, insbesondere für asynchrone Vorgänge und die Ereignisbehandlung. Durch das Erben des „this“-Werts aus dem umgebenden Kontext stellen Pfeilfunktionen sicher, dass das richtige Objekt für Methodenaufrufe und Ereignisrückrufe beibehalten wird.

Das obige ist der detaillierte Inhalt vonWie wirkt sich die lexikalische Bindung auf das Schlüsselwort „this' in ES6-Pfeilfunktionen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!