事件處理程序中不明確的「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中文網其他相關文章！
