使用的“本”使用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

回答

相关问题