微信扫一扫打赏支持

js循环函数中的匿名函数和闭包问题（匿名函数要用循环中变量的问题）

js循环函数中的匿名函数和闭包问题（匿名函数要用循环中变量的问题）

一、总结

需要好好看下面代码

本质是因为匿名函数用到了循环中的变量，而普通方式访问的话，匿名函数的访问在循环之后，所以得到的i是循环执行完之后的i，所以不是正确结果

而直接执行匿名函数的方式当场就拿到了正确的i，闭包的方式也是因为将外部函数的变量保存在内存中从而可以得到正确的i

1、直接执行匿名函数的方式和闭包的方式都可以得到正常的结果

2、普通方式因为循环已经执行完成，所以得到的结果（用到的循环中的变量i）都是i执行完最后的结果

3、闭包的方式需要传参

 

闭包的方式

1.这里的匿名函数有一个参数 n，也就是最终将返回的结果数值；

2.在调用每个匿名函数时传入变量i

3.变量i的当前值会赋值给n，

4.匿名函数内部创建并返回了一个访问n的闭包

5.如此数组arr中的每个函数中都有了自己的n变量的一个副本(闭包可以将局部变量贮存在内存中)

 

二、js循环函数中的匿名函数和闭包问题

代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9   /*
10       function fun(){
11          var arr=[];
12          for(var i=0; i<5; i++){
13             arr[i]='元素'+i;
14          }
15          return arr
16       }
17 
18       alert(fun())
19 
20     // 循环里包含匿名函数
21      function fun(){
22          var arr=[];
23          for(var i=0; i<5; i++){
24             arr[i]=function(){ 
25                 return '元素'+i;
26             }
27          }
28          return arr
29       }
30        //alert(fun())
31       //输出一个包含五个匿名函数的数组
32       // arr = [function,function,function,function,function];
33 
34       var Bb=fun() //循环已经执行完毕，此时的i已经变成4++变为为5
35       //alert(Bb);
36       //alert(Bb[0]);alert(Bb[1]);alert(Bb[2]);
37       //alert(Bb[0]());alert(Bb[1]());alert(Bb[2]());
38 
39     // for(var i=0; i<5; i++){
40     //   alert(Bb[i]) // arr[i]得到的只是没有执行的匿名函数function(){};
41     // }
42     alert(Bb.length)
43     for(var i=0; i<5; i++){
44       alert(Bb[i]()) // Bb[i]()将得到的匿名函数执行，但是并没有得到想要的结果，全都是[元素5]
45     }
46  
47     //让匿名函数立即执行来赋值
48     function fun(){
49          var arr=[];
50          for(var i=0; i<5; i++){
51             arr[i]=(function(){ 
52                 return '元素'+i;
53             })() //匿名函数立即执行，函数参数按值传递，故将当前值返回
54          }
55          return arr
56       }
57     var Bb=fun()
58     alert(Bb.length)
59     alert(Bb)
60     // for(var i=0; i<5; i++){
61 
62     //   alert(Bb[i]) 
63     // }
64   */
65 
66   //通过闭包让局部变量驻留在内存中
67   function fun(){
68          var arr=[];
69          for(var i=0; i<5; i++){
70             arr[i]=function(n){ 
71                 return function(){ 
72                   return '元素'+n;
73                 }
74             }(i) 
75          }
76          return arr
77       }
78     var Bb=fun()
79     //alert(Bb.length)
80    // alert(Bb[0]())
81     for(var i=0; i<5; i++){
82         //alert(Bb[i]) 
83         alert(Bb[i]()) 
84     }
85     //这次成功的输出了 ‘元素0 元素1 元素2 元素3 元素4 ’，而不再都是[元素5]
86     /*
87       1.这里的匿名函数有一个参数 n，也就是最终将返回的结果数值；
88       2.在调用每个匿名函数时传入变量i
89       3.变量i的当前值会赋值给n，
90       4.匿名函数内部创建并返回了一个访问n的闭包
91       5.如此数组arr中的每个函数中都有了自己的n变量的一个副本(闭包可以将局部变量贮存在内存中)
92 
93     */
94   </script>
95 </body>
96 </html>

 

 

posted @ 2018-05-11 22:41  范仁义  阅读(1342)  评论(0)  编辑  收藏  举报