zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    css盒子模型 ( 基本针对兼容性问题有点帮助 )
    11.5 Array 数组
    11.5笔记 数组去重
    11.5笔记 函数
    11..2笔记 对象
    11.1笔记
    10.31笔记
    10.31笔记 作用域链
    10.15笔记 js
    10.8补
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9026896.html
Copyright © 2011-2022 走看看