Javascript 如何防止事件处理程序反弹“this”

我有一个JS对象，它的一个原型函数是用于单击的事件处理程序。调用该函数时，this对象被设置为click绑定到的元素。我希望这是函数所属对象的实例。这可能吗？如果可能，我该怎么做？我可以接受使用jQuery或不使用jQuery的解决方案，尽管我相信其他人会喜欢纯JS解决方案

我试过了，它被绑定到窗口而不是对象的实例

我想要的示例：在下面复制的代码中，我想要一个在单击按钮时显示“吠叫”的警报

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);

您可以使用.bind，如下所示：

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

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

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

您可以使用.bind，如下所示：

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

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

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

---

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

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

像这样的东西可以为你简化样板

---

这是一种比强制调用者始终使用.bind调用函数更好的方法，因为他们不需要如此深入地理解您的类。

如果您始终希望使用自己的上下文调用函数，请在构造函数运行时执行绑定：

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

像这样的东西可以为你简化样板

---

这是一种比强制调用者始终使用.bind调用函数更好的方法，因为他们不需要如此深入地理解您的类。

我更喜欢这种方法，因为它不需要每次都绑定，因为你在最后一句中说过，调用者不必知道方法是如何工作的，他们需要绑定一些东西。谢谢是的，我认为这是类的一个实现细节——没有人应该关心您是否在函数中使用它；它应该像调用者期望的那样工作。您的类公开拟在多个上下文中调用的伪静态函数的情况是调用方必须手动绑定。我更喜欢此方法，因为它不需要每次都绑定，因为你在最后一句中说过，调用者不必知道方法是如何工作的，他们需要绑定一些东西。谢谢是的，我认为这是类的一个实现细节——没有人应该关心您是否在函数中使用它；它应该像调用者期望的那样工作。类公开拟在多个上下文中调用的伪静态函数的情况是调用方必须手动绑定。