コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > Python チュートリアル > js关于for循环中的闭包问题？

js关于for循环中的闭包问题？

WBOY
リリース： 2016-06-06 16:24:31
オリジナル
1538 人が閲覧しました

for(var i=0,arr=[];i arr.push(function(){alert(i)});
}
arr[0](); // ?? 结果不是0
arr[1](); // ?? 全是4
改装后
for(var i=0,arr=[];i arr.push(
(function(i){
return function(){
alert(i);
}
})(i)
);
}
使用闭包可以解决了，为什么第一次代码中的i读取的一直是I变量的最后的结果呢?
那个大神能给分析一下第一段代码的执行的具体步骤呢？

回复内容：

来答一发，欢迎大神斧正！这个问题用js的 预解释+作用域+闭包 就能够解释得通，为了方便理解，我下面用两个图来说明一下：

  • 这是修改之前的运行过程：

图例：绿框为函数执行的栈内存，粉色为堆内存，0XAA为内存地址（存储着函数的字符串，并不会执行，当函数被调用时才会拿出来执行），沿着主流程从上到下看来看
js关于for循环中的闭包问题？在修改之前的原始版分中，arr中每一项执行时，都会去上级作用域寻找i，而i在for循环执行结束后就已经变成了4，所以arr中每一项执行的结果都是一样的。函数在预解释阶段，都被当成字符串存入堆内存，在真正执行时，才会被拿出来执行，数组中存储的，其实只是指向这个堆内存的指针，i并没有传进去，执行的时候i才被传进去。


  • 这是修改之后的运行过程：
js关于for循环中的闭包问题？修改之后的版本中，arr中每次添加新项是都会使得自执行函数执行，并将i作为参量传入了自执行函数，关键点是 function(i){...}(i)中第一个i是函数的形参，是私有变量，与外面的i没有关系，被私有作用域保护起来了，第二个i才是函数中外面的i（也就是说第一个i只是一个迷惑人的量，你改成k也是一样的结果，只不过是把i赋给k而已），这样一来，每次触发自执行函数时，都相当于将当前循环的变量i存储了下来。当arr中每一项执行时，调用了自执行函数返回的一个新地址的函数，这个新地址的函数会去上级作用域去寻找i，上级作用域是形成这个新地址时的自执行函数（意思就是0xA1这个地址是从0XAA函数第一次执行return得到的，0XAA第一次执行时的栈内存就是0XA1的上级作用域），上级作用域中的i（或者说是上级作用域中那个形参）就是他要找的i，故能达到你要的效果。这种保护私有变量的机制就是闭包。

至于什么js缺陷、bug之类的论调大可歇歇了（至少这个问题不算是bug）。开惯了自动挡的人，非要嘲笑手动挡的车离合油门配合不当容易熄火，有意思么？人家原理就是这样的，至少作为前端语言还是不错的。非要拉出去和工业语言一较高下，算我没说。
js关于for循环中的闭包问题？ 这里的 i 是个引用，你只要明白了这点就没啥难理解的。

<code class="language-js"><span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[],</span> <span class="nx">i</span><span class="p">;</span>

<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"> <span class="mi">3</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
  <span class="p">});</span>
<span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="c1">// 3</span>
<span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]();</span> <span class="c1">// 3</span>

<span class="nx">i</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>

<span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]();</span> <span class="c1">// 5</span>
</span></code>
ログイン後にコピー
理解这个问题的关键是execution context，简单说就是当一个function被call的时候，它能“看到”哪些地方的变量名。为了简化问题你暂时可以考虑execution context只由以下两种组成：1)Global scope也就是全局的变量，2)每个function被call的时候在这个function里面定义的变量。

每当一个function被call的时候，会有一个object产生（叫activation object），这个object会包括这个被call的function里定义的变量和arguments，以及它们的值。Global scope的变量由global object来保存。当function尝试读取一个变量的时候，它会先从最近的一个这种object来读（就像prototyping，但注意这个近取决于function的定义在哪里，而不是被执行的地方），读到了就不继续了，反之会读上一级context的这个object，直到global context。当某一个function结束执行时，跟它相连的这个object会被取消reference（然后就会被GC清理）。也就是说假如你有以下的code:
<code class="language-js"><span class="kd">var</span> <span class="nx">globalVar</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">outerVar</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">innerVar</span><span class="p">;</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span>

<span class="kd">function</span> <span class="nx">outer</span><span class="p">()</span> <span class="p">{</span>    
    <span class="kd">function</span> <span class="nx">inner</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">innerVar</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span>
    <span class="p">}</span>
    
    <span class="kd">var</span> <span class="nx">outerVar</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVar</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">outerVar</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">innerVar</span><span class="p">);</span>
    <span class="nx">inner</span><span class="p">();</span>
<span class="p">}</span>

<span class="nx">outer</span><span class="p">();</span>
</code>
ログイン後にコピー
关于本题：
抛开有关大家常说的执行环境作用域链变量引用的解释，我们还可以从一些执行步骤乃至语义的角度来分析解决题主提到的问题。
<code class="language-text">for(var i=0,arr=[];i</code>
ログイン後にコピー
<code class="language-js"><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[];</span> <span class="nx">i</span> <span class="o"> <span class="mi">3</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">alert</span><span class="p">(</span><span class="nx">j</span><span class="p">)</span>
    <span class="p">});</span>
<span class="p">}</span>
</span></code>
ログイン後にコピー
因为js没有块级作用域
for循环的循环体不是一个作用域
你的第一段代码等效于以下展开
<code class="language-js"><span class="kd">var</span> <span class="nx">arr</span><span class="o">=</span><span class="p">[];</span>
<span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>

<span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);});</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>
<span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);});</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>
<span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);});</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>
<span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);});</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>

<span class="nx">arr</span><span class="p">[</span><span class="mi">0</span><span class="p">]();</span>
<span class="nx">arr</span><span class="p">[</span><span class="mi">3</span><span class="p">]();</span>
</code>
ログイン後にコピー
関連ラベル：
alert arr for function push
ソース：php.cn
前の記事：如何理解Python装饰器？ 次の記事：有什么值得推荐的ipython notebooks？
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2250
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2388
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2001
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1885
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1955
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート