Warum verhält sich „$(this)' bei jQuery- und ES6-Pfeilfunktionen schlecht?

Verwenden von jQuery $(this) mit ES6-Pfeilfunktionen: Lexikalische This-Bindung

Bei Verwendung von jQuerys $(this) mit ES6-Pfeilfunktionen, Entwickler können auf ein Problem stoßen, bei dem $(this) mithilfe von self = this in einen Abschluss im ES5-Stil konvertiert wird. Dieses Verhalten ist auf die lexikalische Bindungsnatur von Pfeilfunktionen zurückzuführen.

Problem:

Der folgende Code veranschaulicht das Problem:

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

Wann Stattdessen wird eine Pfeilfunktion verwendet:

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

$(this) wird in einen Abschluss im ES5-Stil umgewandelt, was zu unerwartetem Ergebnis führt Verhalten.

Lösung:

Dieses Problem ist ein inhärentes Merkmal der ES6-Pfeilfunktionen und kann mit Traceur nicht umgangen werden. Um dieses Problem zu beheben, muss man vermeiden, dies für den Zugriff auf das angeklickte Element zu verwenden. Stattdessen kann die Eigenschaft event.currentTarget verwendet werden:

class Game {
  foo() {
    this._pads.on('click', (event) => {
      if (this.go) { $(event.currentTarget).addClass('active'); }
    });
  }
}

jQuery stellt event.currentTarget speziell für Situationen bereit, in denen diese Bindung aufgrund externer Faktoren, wie z. B. der Bindung der Callback-Funktion an einen anderen Kontext, mehrdeutig sein kann über .bind().

Das obige ist der detaillierte Inhalt vonWarum verhält sich „$(this)' bei jQuery- und ES6-Pfeilfunktionen schlecht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!