如何防止「this」被事件處理程序反彈

我有一個JS對象，它的一個原型函數是一個點擊事件處理程序。當該函數被調用時，this對象被設置爲點擊所綁定的元素。我想this是該函數所屬對象的實例。這是可能的，如果是這樣，我該怎麼做？有或沒有jQuery的解決方案對我來說都是可以接受的，儘管我確信SO的其餘部分會讚賞純JS解決方案。如何防止「this」被事件處理程序反彈

我試過binding the function to this，它被綁定到窗口而不是對象的實例。

我想要的例子：在this demo（下面重複的代碼）中，我想要一個警報，在點擊按鈕時顯示「Bark」。

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

來源

2015-02-06 Josh Sherick

如果你總是想要一個函數被調用用它自己的上下文，在構造函數運行時做綁定：

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

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

喜歡的東西_.bindAll可以減少樣板你。

這是一個比強迫你的呼叫者總是用.bind調用函數更好的方法，因爲他們不需要如此深入地理解你的類。

來源

2015-02-06 21:33:23 Interrobang

我更喜歡這種方法，因爲它不需要我每次都綁定，因爲你在最後一句話中說了什麼，調用者應該不需要知道方法是如何工作的，而且他們需要綁定的東西。謝謝！ – 2015-02-06 21:39:31

是的，我認爲這是你類的「實現細節」 - 沒有人應該關心你是否在函數內部使用'this';它應該像調用者期望的那樣工作。當你的類暴露了一個僞靜態函數，這個函數打算在多個上下文中調用時，調用者必須手動「綁定」。 – Interrobang 2015-02-06 22:12:30

您可以使用.bind()這樣的：

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

做的手工方式是用自己的功能：

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

來源

2015-02-06 21:32:26 jfriend00

如何防止「this」被事件處理程序反彈

回答

相關問題