Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Backend-Entwicklung > Python-Tutorial > js关于for循环中的闭包问题？

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

WBOY
Freigeben： 2016-06-06 16:24:31
Original
1540 Leute haben es durchsucht

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>
Nach dem Login kopieren
理解这个问题的关键是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>
Nach dem Login kopieren
关于本题：
抛开有关大家常说的执行环境作用域链变量引用的解释，我们还可以从一些执行步骤乃至语义的角度来分析解决题主提到的问题。
<code class="language-text">for(var i=0,arr=[];i</code>
Nach dem Login kopieren
<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>
Nach dem Login kopieren
因为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>
Nach dem Login kopieren
Verwandte Etiketten：
alert arr for function push
Quelle：php.cn
Vorheriger Artikel：如何理解Python装饰器？ Nächster Artikel：有什么值得推荐的ipython notebooks？
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2252
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2389
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
2002
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1889
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1956
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage