如何在初始化函數中將原型函數添加到事件偵聽器？

Question

我不確定如何說出我的問題，所以讓我舉一個例子：

function foo() {
  window.addEventListener("keydown", function(event) {
        bar(event.keycode);
}

foo.prototype.bar = function (keycode) {
//code
}

我已經嘗試使用this.bar()但是這導致使用該window作為this 。 有沒有辦法做到這一點，還是我必須手動調用另一個初始化方法？

Answer 1

在傳遞之前將this.bar綁定this 。

function foo() {
    window.addEventListener("keydown", this.bar.bind(this), false);
}


foo.prototype.bar = function (event) {
    console.log(event.keyCode);
}

演示http://jsfiddle.net/2tee4/

Answer 2

如果你沒有Function.prototype.bind可用的替代解決方案*，並且你不願意向Function.prototype添加額外的函數將關閉對this.bar ：

function foo() {
    var self;
    self = this;
    window.addEventListener('keydown', function (e) {
        self.bar(e);
    }, false);
}
foo.prototype.bar = function (e) {
    console.log(e.keyCode);
}

_{*盡管你使用不帶attachEvent的addEventListener讓我相信Function.prototype.bind是一個可以接受的選擇}

---

另外，諸如jQuery庫可能包含它們自己的bind形式，jQuery是jQuery.proxy 。

Answer 3

如果你的目的是為每個創建的foo添加一個新的監聽器，另一個選擇是使foo實現EventListener接口，並簡單地傳遞this來代替處理程序。

function Foo() {
    window.addEventListener("keydown", this, false);
}

Foo.prototype.bar = "foobar";

Foo.prototype.handleEvent = function(e) {
    console.log(e.type);   // "mousedown" (for example)
    console.log(this.bar); // "foobar"
};

new Foo();

請注意，這僅適用於addEventListener() 。

演示： http ： //jsfiddle.net/k93Pr/