Javascript 如何在事件处理程序中访问“this”？

我有一个类，它创建一个DOM元素，并且必须捕获所有单击事件

简化代码：

function myClass()
{
  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", this.handleClick);
}
myClass.prototype.handleClick = function(evt)
{
  alert("Clicked!");
  // How to modify `this` object?
}

现在我想在

handleClick（）

中修改myClass实例的一些属性和变量。但是

这当然是指画布对象

问题：我如何访问事件处理程序中对象的
此

function myClass() {
  var self = this;

  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", function(evt){
      // use self here
  });
}

因为监听器实际上是一个闭包，所以它维护对变量
self
的引用，这是您正在观察的对象。实际
正如您所理解的，这个
引用了canvas元素

另一种可行的方法是将方法分开：

function myClass(){
  var self = this;

  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", function(evt){
    myClass.prototype.call(self, evt);
  });
}
myClass.prototype.handleClick = function(evt){
  alert("Clicked!");
  // How to modify `this` object?
}

现在，这一个使用并分配此
引用的内容。
您可以使用
.bind
，它使用预设值“冻结”此
值：

.bind
返回一个新函数，该函数执行与原始函数相同的操作，但它将
设置为this
，以便您可以依赖它作为您提供的值

虽然
.bind
在较旧的浏览器上不可用

这可以通过关闭对实例的引用并使用apply强制函数的作用域来实现：

在步骤1中，我有您的示例，显示了该
是如何被单击的元素：

在步骤2中，我有一个例子，它在构造函数中存储对实例的引用，然后将匿名函数设置为click处理程序，并从存储的引用中调用click方法。这将使单击处理程序中的
This
成为您的实例，并且如果您不需要访问已单击的元素，它将为您工作

在步骤3中，我存储了相同的引用，并使用了一个匿名函数，但在该函数中，我获取了在单击时进入anon函数的参数，我将对实例的引用添加到这些参数中，并在clicked元素的范围内调用click处理程序，并传递新的参数集。使用此方法，在单击处理程序中，我可以通过
this
访问单击的元素，并通过
instance
访问
myClass
的实例

我希望这有帮助。这可能会让人很困惑，所以如果需要，可以提问。
谢谢！我已经更新了示例，因此元素是可单击的：。旧浏览器没有问题，因为我使用canvas元素。但我需要支持欧佩拉和萨法里。谢谢！我已经更新了这个示例来测试对“this”的访问：非常感谢三个解决方案！我喜欢最好的解决方案2（好且简单）。但出于何种原因，我需要访问原始的
此
？当我想要访问DOM元素时，我通过
evt.target
来实现。这只是一个偏好问题和代码如何编写的问题。如果您喜欢2和使用
evt.target
，这是合法的。但是，如果您正在修改一些现有代码，那么最终可能会遇到需要不同作用域的情况，因此3在这种情况下可能会更好。好的，谢谢。我正在编写我自己的框架，因此在这方面没有任何问题。答复（已接受；）
// bind 'this' value inside handleClick when clicked
this.domElement.addEventListener("click", this.handleClick.bind(this));