web-dev-qa-db-ja.com

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

$ .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)
}
jqueryclosures
20
chris_mac

.each()を呼び出す前に、thisへの参照を保存します-selfという名前を付けます-次に、self.rulesを使用して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)
}
22
João Silva

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

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

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

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

クロージャ関数を作成する方が良い解決策です 。

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

0
Dustin Page

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)
}
0
Zoltán Süle