javascript - 在监听器方法中访问对象属性

Question

假设我有以下代码:

var Obj = function() {
   this.property = 1;
   this.arr = [...] // array containing elements we want to add event listeners to
   for (...) {
      this.arr[i].addEventListener("click", this.listener, false);
   }
}

Obj.prototype.listener = function() {
   console.log( this.property ); // DOES NOT WORK! *this* does not point to Obj.
}
var a = new Obj();

如何访问监听器中的对象属性(和方法)？我认为我需要将它作为参数传递？我处理这个问题的方式在结构上是错误的吗？

Answer 1

当该函数作为事件监听器调用时，上下文 (this) 将更改为对象本身以外的其他内容。

<小时/>

要解决此问题，请使用 bind() 将上下文手动绑定(bind)到构造函数中的对象实例。 。这样，this 将始终指向对象实例，与调用上下文无关:

var Obj = function() {
  this.property = 'foo';
  this.listener = this.listener.bind(this);
}

Obj.prototype.listener = function() {
  console.log(this.property);
}

var a = new Obj();
a.listener.call({});