JavaScriptクロージャーとスコープチェーンの例
-
21-12-2019 - |
質問
誰かが私に説明することができますか(明確かつ簡潔に)このコードがそれができる理由は何ですか?私は閉じられていない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とインターフェースするときにクロージャテクニックを適用できる方法の良い、実用的な例を持っていますか?
ありがとう。
解決
あなたが持っている例では、とても簡単です。
最初の例では、変数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(); });
. 所属していません StackOverflow