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

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函数的参数，我将实例的引用添加到这些参数中，并调用click处理程序在clicked元素的范围内并传递新的参数集。 http://jsfiddle.net/JAAulde/GJXpQ/2/使用这种方法，在点击处理程序中，我可以通过this访问被点击的元素，并通过instance访问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有一个垫片 。

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