Question

我有一个JS对象，其中一个原型函数是一个点击的事件处理程序。调用该函数时，this对象将设置为单击绑定的元素。我希望this成为该函数所属对象的实例。这是可能的，如果是的话，我该怎么做？有或没有jQuery的解决方案对我来说是可以接受的，尽管我确信SO的其余部分会欣赏纯粹的JS解决方案。

我已经尝试了binding the function to this，它被绑定到窗口而不是对象的实例。

我想要的示例：在this demo（下面重复的代码）中，我想要一个警告说＆＃34; Bark＆＃34;单击按钮时。

var Dog = function () {
    this.sound = "Bark";
}

Dog.prototype = {
    sayHello: function (e) {
        if (typeof this.sound == "undefined") {
            alert("I don't know what sound I should make!\n" + this);
        } else {
            alert(this.sound);
        }
    }
}

var d = new Dog();
var elem = document.getElementById("click");
elem.addEventListener("click", d.sayHello);

Answer 1

您可以像这样使用.bind()：

elem.addEventListener("click", d.sayHello.bind(d));

手动方式是使用您自己的功能：

elem.addEventListener("click", function(e) {
    return d.sayHello();
});

Answer 2

如果您总是打算使用自己的上下文调用函数，请在构造函数运行时执行绑定：

var Dog = function () { 
  this.sound = "Bark";
  this.sayHello = this.sayHello.bind(this);
}

http://jsfiddle.net/04ykpsx1/1/

像_.bindAll之类的东西可以减少你的样板。

这比迫使你的来电者总是用.bind调用一个函数更好，因为他们不需要如此深入地理解你的课程。

如何预防＆＃34;这个＆＃34;从事件处理程序反弹

2 个答案: