Wie verwende ich „$(this)' korrekt mit jQuery-Click-Handlern und ES6-Pfeilfunktionen?

jQuery $(this) und ES6-Pfeilfunktionen

Während ES6-Pfeilfunktionen eine lexikalische Bindung bieten, können sie bei Verwendung mit eine Herausforderung darstellen jQuery-Klickbindungen. Wenn in diesem Szenario Pfeilfunktionen verwendet werden, verhält sich $(this) anders und emuliert im Wesentlichen das ES5-Abschlussverhalten:

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

Um dieses Problem zu beheben, ist es wichtig zu verstehen, dass Traceur nicht in der Lage ist, $( zu ignorieren. Dies) für die lexikalische Bindung in diesem Zusammenhang. ES6 bestimmt das Verhalten von Pfeilfunktionen, und ihnen fehlt von Natur aus der Zugriff auf lexikalisches This.

Die Lösung liegt in der Verwendung von event.currentTarget anstelle von $(this):

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

jQuery stellt Ereignisse bereit .currentTarget speziell für diesen Zweck, da erkannt wird, dass der Zugriff auf lexikalische Funktionen mit Callback-Funktionen nicht immer möglich ist. Durch die Nutzung von event.currentTarget wird auf das richtige Element abgezielt, wodurch die Notwendigkeit vermieden wird, diese Bindung zu ändern oder eine Abhängigkeit vom ES5-Code einzuführen.

Das obige ist der detaillierte Inhalt vonWie verwende ich „$(this)' korrekt mit jQuery-Click-Handlern und ES6-Pfeilfunktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!