jQuery each()闭包 - 如何访问外部变量

时间:2012-09-06 22:21:12

标签: jquery closures

从$ .each()中访问my.rules变量的最佳方法是什么?任何解释为什么/如何也会有所帮助!

app.Style = function(node) {
    this.style = node;
    this.rules = [];
    var ruleHolder = node.find('Rule');

    $.each(ruleHolder, function(index, value) {
        var myRule = new app.Rule($(ruleHolder[index]));
        this.rules.push(myRule);
    });

    console.log(this.rules)
}

3 个答案:

答案 0 :(得分:21)

存储对this的引用 - 例如,将其命名为self,然后再调用.each(),然后使用rules访问self.rules

app.Style = function(node) {
    this.style = node;
    this.rules = [];
    var ruleHolder = node.find('Rule');

    var self = this;
    $.each(ruleHolder, function(index, value) {
        var myRule = new app.Rule($(ruleHolder[index]));
        self.rules.push(myRule);
    });

    console.log(this.rules)
}

答案 1 :(得分:1)

JoãoSilva的上述答案并不是一个好的解决方案,因为它创造了一个全局变量。您实际上并没有通过引用将“self”变量传递给每个函数,而是引用全局“self”对象。

在上面的例子中,“this”是窗口对象,设置“var self = this”并没有真正做任何事情。

Window对象有两个自引用属性,window和self。您可以使用全局变量直接引用Window对象。

简而言之,window和self都是对Window对象的引用,它是客户端javascript的全局对象。

Creating a closure function is a better solution

Screenshot showing window and self comparison

答案 2 :(得分:0)

没有var self = this;

,它会更优雅
app.Style = function(node) {
    this.style = node;
    this.rules = [];
    var ruleHolder = node.find('Rule');

    $.each(ruleHolder, function(index, value) {
        var myRule = new app.Rule($(ruleHolder[index]));
        this.rules.push(myRule);
    }.bind(this));

    console.log(this.rules)
}