JavaScriptクロージャーとスコープチェーンの例

Question

誰かが私に説明することができますか（明確かつ簡潔に）このコードがそれができる理由は何ですか？私は閉じられていないJava（6と7）の強く型付けされた背景から来て、それらがJavaScriptで行う方法では機能しません。この質問に関連する概念は、クロージャーとスコープチェーンです。

これは例です：

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = function() { console.log(i); }
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });

.

上記の例は9（10回）ですが、期待と私自身の直感は0-9に記録されると考えていました。

なぜこれはJavaScriptで行う方法で機能しますか？クロージャは非常に強力ですが、私は概念を一度把握しようとしています！少し変更された例は正しい出力を生成しますが、なぜですか？

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = (function(index) { console.log(index); })(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); }); 

.

クロージャはJavaScriptに固有のものではありませんが、JavaScriptがブラウザ/ DOMとインターフェースに書き込まれたときのコンテキストで強力な理由を見たいです。

ブラウザ/ DOMとインターフェースするときにクロージャテクニックを適用できる方法の良い、実用的な例を持っていますか？

ありがとう。

Answer 1

あなたが持っている例では、とても簡単です。

最初の例では、変数iが1つだけであり、すべての値がその単一の値を参照します。それで。それは数字9を10回印刷します。各機能は、変更されたiの Shared 値をキャプチャしました。

第2の例では、閉鎖を使用しています。各関数にはindexを受け取るプライベート変数があります。これは、値iの重要な部分です。

の重要な部分です。

SO、0を介して9を使用すると、プライベートindex変数を持つ1つ、およびそれらのindex変数のそれぞれが存在しているときにi のスナップショットを取得します。

これ、閉鎖の長い形で、助けることができる：

function myFactory(index) {
  return function() {
    console.log(index);
  }
}

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = myFactory(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); }); 

.