Warum verhält sich „dies' in JavaScript-Ereignishandlern unerwartet?

Das mehrdeutige „dies“ innerhalb von Event-Handlern

Bei der Arbeit mit JavaScript ist es üblich, Event-Handler mit der Methode addEventListener zu erstellen. Beim Versuch, innerhalb dieser Handler auf Objekteigenschaften zuzugreifen, tritt jedoch ein eigenartiges Verhalten auf: „this“ bezieht sich nicht auf das Objekt, sondern auf das Element, das das Ereignis ausgelöst hat.

Problemszenario

Betrachten Sie den folgenden Code, der dieses Problem veranschaulicht:

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick, false);
};

ticketTable.prototype.handleCellClick = function() {
  // "this" refers to the clicked cell element, not the ticketTable object
  // ...
};

In der Funktion handleCellClick würde der Zugriff auf this.tickets fehlschlagen, da „this“ auf die angeklickte Zelle und nicht auf die TicketTable-Instanz verweist.

Lösung: Bind verwenden

Um dieses Problem zu lösen, können wir die Bind-Methode verwenden, die es uns ermöglicht, den Wert von „this“ für eine bestimmte Funktion explizit zu definieren .

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);
};

Durch die Verwendung von bind(this) stellen wir sicher, dass „this“ beim späteren Aufruf der handleCellClick-Funktion korrekt auf das TicketTable-Objekt verweist, sodass wir auf dessen Eigenschaften wie this.tickets zugreifen können .

Alternative Lösungen

Alternative Ansätze umfassen neben bind auch die Verwendung einer Event-Handler-Funktion, die explizit für die Verwendung von „this“ (nicht der onclick-Eigenschaft) definiert ist, oder die Erstellung eines speziellen handleEvents Funktion zur Verarbeitung aller Ereignisse.

Das obige ist der detaillierte Inhalt vonWarum verhält sich „dies' in JavaScript-Ereignishandlern unerwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!