使用的「本」使用jQuery

最近我一直在試圖讓一個對象在JavaScript具有以下結構的JavaScript對象：使用的「本」使用jQuery

function colorDiv(div){ 
     this.div=div; 
     this.div.bind("click",this.changeColor) 
     this.changeColor(){ 
      this.div.css("background", "#FF0000"); 
     } 
}

的問題是changeColor方法不能從所謂的jQuery環境因爲this必須引用當前的colorDiv對象，所以bind方法無法按預期工作。這怎麼解決？

來源

2011-07-14 Gonzalo

我認爲問題是，如果你要使用jQuery的方法，如綁定或CSS，你需要的jQuery的範圍內做到這一點，即$（DIV）.bind，$（格）的.css – thescientist

有幾種方法。最簡單的是如下：

function ColorDiv(div) { 
     var that = this; 

     that.div = div; 
     that.div.bind("click", that.changeColor); 

     that.changeColor = function() { 
      that.div.css("background", "#FF0000"); 
     }; 
} 

var colorDiv = new ColorDiv($("#my-div")); 
$("#something-else").click(colorDiv.changeColor);

您保存在變量that到this參考，這僅僅是在JavaScript世界常用出於這樣的目的的名字。然後你在changeColor方法中引用that而不是this。（請注意，我用that無處不在，只是爲了保持一致性，即使它實際上有差別的唯一的地方是changeColor方法內。）

另一種是使用Function#bind方法。您可以使用它每次調用changeColor時間，像這樣：

var colorDiv = new ColorDiv($("#my-div")); 
$("#something-else").click(colorDiv.changeColor.bind(colorDiv));

，或者您可以使用它在ColorDiv類，以確保所有的方法都正確綁定時，他們被稱爲：

this.changeColor = (function() { 
    this.div.css("background", "#FF0000"); 
}).bind(this);

如鏈接文章所述，Function#bind在所有瀏覽器中都不受支持，因此您需要使用墊片，例如他們提供的墊片，或者可能需要full-fledged ES5 shim。

Underscore.js具有bindAll功能可能是有用的在這裏，特別是多種方法：

_.bindAll(this);

最後，值得一提的，你並不真的需要做任何這在具體的例子：剛做

this.changeColor = function() { 
    div.css("background", "#FF0000"); 
};

，而不是你有什麼，即引用div變量傳遞中，而不是存儲在參考，因爲它們是相同的東西。

來源

2011-07-14 01:07:48 Domenic

謝謝老兄，我正在尋找類似綁定功能的東西。可悲的是，它不適用於'不那麼新'的瀏覽器，但我會給出下劃線試試;） – Gonzalo

嘗試設置作爲該方法的第一行：

var self = this;

，然後使用自根據需要。

this.div.bind("click",self.changeColor)

來源

2011-07-14 01:09:21

小心：雖然'self'不是保留字，它是一個預定義變量，它引用'window'對象。見[window.self]（https://developer.mozilla.org/en/DOM/window.self） – Shaz

使用的「本」使用jQuery

回答

相關問題