jQuery each（）闭包 - 如何访问外部变量

What's the best way to access my this.rules variable from within $.each()? Any explanation of why/how would also be helpful!

从$ .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 个解决方案

#1

Store a reference to this -- name it self, for example --, before calling .each(), and then access rules using self.rules:

存储对此的引用 - 例如，将其命名为 - ，在调用.each（）之前，然后使用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)
}

#2

The answer above by João Silva is not a good solution as it creates a global variable. You are not actually passing a "self" variable to the each function by reference, but are instead referencing the global "self" object.

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

In the example above "this" is the window object and setting "var self = this" isn't really doing anything.

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

The Window object has two self-referential properties, window and self. You can use either global variable to refer directly to the Window object.

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

In short, both window and self are references to the Window object, which is the global object of client-side javascript.

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

Creating a closure function is a better solution.

创建闭包函数是更好的解决方案。

Screenshot showing window and self comparison

屏幕截图显示窗口和自我比较

#3

it is more elegant without var self = this;

没有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)
}

#1