Question

我有一个创建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实例的一些属性和变量。但是this当然是指画布对象。

问题：如何在事件处理程序中访问对象的this？

Answer 1

这可以通过关闭对实例的引用并使用apply来强制执行函数的范围来实现：

在第1步中，我举例说明this是如何点击的元素：http://jsfiddle.net/JAAulde/GJXpQ/

在第2步中，我有一个示例，它在您的构造函数中存储对您的实例的引用，然后将一个匿名函数设置为单击处理程序，并从存储的引用中调用您的click方法。 http://jsfiddle.net/JAAulde/GJXpQ/1/这会导致点击处理程序中的this成为您的实例，如果您不需要访问被点击的元素，则会为您工作。

在第3步中我存储了相同的引用，并使用了一个匿名函数，但是在该函数中我获取了点击时进入anon函数的参数，我将实例的引用添加到那些参数中，并且我调用了单击元素范围内的单击处理程序并传递新的参数集。 http://jsfiddle.net/JAAulde/GJXpQ/2/使用此方法，在点击处理程序中，我可以通过this访问点击的元素，通过myClass访问instance的实例。

我希望这会有所帮助。这可能很混乱，所以如果需要可以提问。

Answer 2

你可以这样做：

function myClass() {
  var self = this;

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

由于listener实际上是一个闭包，它维护对变量self的引用，这是您正在观察的对象。实际的this，如你所知，引用了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?
}

现在这个使用Function.call并分配this个引用。

Answer 3

您可以使用.bind，{冻结'this值与预设值：http://jsfiddle.net/TKAHg/。

.bind返回一个与原始函数完全相同的新函数，但它会设置this，以便您可以依赖它作为您提供的值。

虽然.bind在旧版浏览器上不可用，但MDC has a shim for it。

// bind 'this' value inside handleClick when clicked
this.domElement.addEventListener("click", this.handleClick.bind(this));

如何在事件处理程序中访问`this`？

3 个答案: