jquery - jQuery each（）クロージャー-外部変数にアクセスする方法

Question

$ .each（）内からthis.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)
}

Answer 1

を呼び出す前に、-にthis名前を付けて-への参照を保存し、 ：を使用してアクセスします。self.each()rulesself.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)
}

Answer 2

JoãoSilvaによる上記の回答は、グローバル変数を作成するため、適切なソリューションではありません。実際には、参照によって各関数に「self」変数を渡すのではなく、グローバルな「self」オブジェクトを参照しています。

上記の例では、「this」はウィンドウオブジェクトであり、「var self=this」を設定しても実際には何も実行されません。

Windowオブジェクトには、windowとselfの2つの自己参照プロパティがあります。いずれかのグローバル変数を使用して、Windowオブジェクトを直接参照できます。

つまり、windowとselfはどちらも、クライアント側のjavascriptのグローバルオブジェクトであるWindowオブジェクトへの参照です。

クロージャ関数を作成することは、より良い解決策です。

ウィンドウと自己比較を示すスクリーンショット

Answer 3

それなしでよりエレガントです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)
}