为什么'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.tickets会失败，因为“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中文网其他相关文章！