為什麼「this」在 JavaScript 事件處理程序中表現異常？

事件處理程序中不明確的「this」

使用 JavaScript 時，通常使用 addEventListener 方法建立事件處理程序。然而，當嘗試存取這些處理程序中的對象屬性時，會出現一種奇怪的行為：「this」並沒有引用對象，而是引用觸發事件的元素。

問題場景

考慮下面的程式碼，它示範了這個問題：

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
  // ...
};

在handleCellClick器函數中，存取this.ticketsets失敗，因為「this」引用了點擊的儲存格，而不是ticketTable實例。

解：使用Bind

要解決這個問題，我們可以使用bind 方法，它允許我們為給定函數明確定義「this」的值.

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

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

透過使用bind(this)，我們可以確保稍後調用handleCellClick函數時，「this」將正確引用ticketTable對象，從而使我們能夠訪問其屬性，例如this.tickets .

替代解決方案

除了綁定之外，替代方法還包括使用明確定義為使用“this”（而不是onclick 屬性）的事件處理函數或創建特殊的handleEvent處理所有事件的函數。

以上是為什麼「this」在 JavaScript 事件處理程序中表現異常？的詳細內容。更多資訊請關注PHP中文網其他相關文章！