Wie kann ich die „this'-Bindung mit jQuerys „$(this)' innerhalb der ES6-Pfeilfunktionen beibehalten?

Lexikalische Bindung dieser Bindung mit jQuery $(this) in ES6-Pfeilfunktionen beibehalten

Beim Arbeiten mit jQuery-Klickbindungen können Entwickler auf ein Problem stoßen beim Versuch, ES6-Pfeilfunktionen mit lexikalischer Bindung zu verwenden. Dies liegt daran, dass Pfeilfunktionen in ES6 dies lexikalisch binden, was zu unerwartetem Verhalten führen kann, wenn jQuery verwendet wird, das einen Abschluss mit einem anderen this-Wert erwartet.

Im bereitgestellten Beispiel:

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

Die Pfeilfunktion bindet dies lexikalisch, wodurch $(this) auf das Game-Objekt und nicht auf das angeklickte Element verweist. Um dieses Problem zu beheben, muss event.currentTarget anstelle von $(this) verwendet werden:

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

Dadurch wird sichergestellt, dass $(this) korrekt auf das angeklickte Element verweist, da jQuery event.currentTarget explizit bereitstellt Behandeln Sie Szenarien, in denen dieser Wert möglicherweise nicht konsistent ist.

Verstehen der lexikalischen Bindung in ES6

ES6-Pfeilfunktionen haben eine lexikalische This-Bindung, was bedeutet, dass sie den This-Wert ihres umgebenden Kontexts erben. Dies kann sowohl vorteilhaft als auch herausfordernd sein, da es versehentliche Bindungsprobleme verhindern kann, erfordert aber auch sorgfältige Überlegungen bei der Arbeit mit Rückrufen.

Fazit

Bei Verwendung von ES6-Pfeilfunktionen mit Bei jQuery-Klickbindungen ist es wichtig, die lexikalische Bedeutung dieser Bindung zu berücksichtigen und die Verwendung von event.currentTarget in Betracht zu ziehen, um explizit auf das angeklickte Element zuzugreifen. Dies stellt die korrekte Funktionalität sicher und verhindert unerwartetes Verhalten aufgrund der Variation dieser Werte.

Das obige ist der detaillierte Inhalt vonWie kann ich die „this'-Bindung mit jQuerys „$(this)' innerhalb der ES6-Pfeilfunktionen beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!