在JavaScript事件处理程序中寻址对象函数

Question

假设我有一个JavaScript类，如下所示：

Foo.prototype = {
  init: function() {
    $(document).keydown(function(event) {
      this.onKeyDown(event);
    });
  }
  onKeyDown: function(event) {
    alert("bar");
  }
}
myObj = new Foo();
myObj.init();

此代码不起作用，因为在中

$(document).keydown(function(event) {
    this.onKeyDown(event);
});

"this"当然是未知的，并且不会寻址对象。无论如何，我如何处理Foo类的onkeydown方法？

我不想用"myObj"（对象的名称）交换"this"，因为我可能也想将该类用于其他对象。

谢谢你的帮助！

Answer 1

将其存储在变量中。。。

Foo.prototype = {
  init: function() {
    var self = this
    $(document).keydown(function(event) {
      self.onKeyDown(event);
    });
  }
}

或者使用jQuery.proxy返回一个绑定了this值的函数。。。

Foo.prototype = {
  init: function() {
    $(document).keydown( $.proxy(function(event) {
      this.onKeyDown(event);
    }, this) );
  }
}

或者您可以使用Function.prototype.bind，但您需要为较旧的浏览器进行修补。

Foo.prototype = {
  init: function() {
    $(document).keydown( (function(event) {
      this.onKeyDown(event);
    }).bind(this) );
  }
}

• MDN针对.bind()的兼容性修补程序