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

一、总结

需要好好看下面代码

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

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

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

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

3、闭包的方式需要传参

闭包的方式

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

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

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

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

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

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

代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="utf-8">

   <title>课堂演示</title>

 </head>

 <body>

   <script>

   /*

       function fun(){

          var arr=[];

          for(var i=0; i<5; i++){

             arr[i]='元素'+i;

          }

          return arr

       }

       alert(fun())

     // 循环里包含匿名函数

      function fun(){

          var arr=[];

          for(var i=0; i<5; i++){

             arr[i]=function(){

                 return '元素'+i;

             }

          }

          return arr

       }

        //alert(fun())

       //输出一个包含五个匿名函数的数组

       // arr = [function,function,function,function,function];

       var Bb=fun() //循环已经执行完毕，此时的i已经变成4++变为为5

       //alert(Bb);

       //alert(Bb[0]);alert(Bb[1]);alert(Bb[2]);

       //alert(Bb[0]());alert(Bb[1]());alert(Bb[2]());

     // for(var i=0; i<5; i++){

     //   alert(Bb[i]) // arr[i]得到的只是没有执行的匿名函数function(){};

     // }

     alert(Bb.length)

     for(var i=0; i<5; i++){

       alert(Bb[i]()) // Bb[i]()将得到的匿名函数执行，但是并没有得到想要的结果，全都是[元素5]

     }

     //让匿名函数立即执行来赋值

     function fun(){

          var arr=[];

          for(var i=0; i<5; i++){

             arr[i]=(function(){

                 return '元素'+i;

             })() //匿名函数立即执行，函数参数按值传递，故将当前值返回

          }

          return arr

       }

     var Bb=fun()

     alert(Bb.length)

     alert(Bb)

     // for(var i=0; i<5; i++){

     //   alert(Bb[i])

     // }

   */

   //通过闭包让局部变量驻留在内存中

   function fun(){

          var arr=[];

          for(var i=0; i<5; i++){

             arr[i]=function(n){

                 return function(){

                   return '元素'+n;

                 }

             }(i)

          }

          return arr

       }

     var Bb=fun()

     //alert(Bb.length)

    // alert(Bb[0]())

     for(var i=0; i<5; i++){

         //alert(Bb[i])

         alert(Bb[i]())

     }

     //这次成功的输出了 ‘元素0 元素1 元素2 元素3 元素4 ’，而不再都是[元素5]

     /*

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

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

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

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

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



     */

   </script>

 </body>

 </html>

js循环函数中的匿名函数和闭包问题（匿名函数要用循环中变量的问题）的更多相关文章

  1. js 从两道面试题加深理解闭包与箭头函数中的this

     壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...

  2. JS函数 -- 功能，语法，返回值，匿名函数，自调用匿名函数，全局变量与局部变量，arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

  3. JavaScript中的闭包和匿名函数

    JavaScript中的匿名函数及函数的闭包   1.匿名函数 2.闭包 3.举例 4.注意 1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没 ...

  4. JavaScript中的闭包与匿名函数

    知识内容: 1.预备知识 - 函数表达式 2.匿名函数 3.闭包 一.函数表达式 1.定义函数的两种方式 函数声明: 1 function func(arg0, arg1, arg2){ 2 // 函 ...

  5. JS中函数的本质，定义、调用，以及函数的参数和返回值

    要用面向对象的方式去编程,而不要用面向过程的方式去编程 对象是各种类型的数据的集合,可以是数字.字符串.数组.函数.对象…… 对象中的内容以键值对方式进行存储 对象要赋值给一个变量 var cat={ ...

  6. PHP中的闭包和匿名函数

    闭包的概念是指在创建闭包时,闭包会封装周围的状态的函数.即便闭包所在环境不在了.但闭包中封装的状态依然存在. 匿名函数就是没有名称的函数. 它们看似很函数一样,实际上它们属于Closure类的实例 P ...

  7. js学习笔记<拷贝传值，引用传址和匿名函数>

    拷贝传值:把一个变量的值拷贝一份,传给了另外一个变量拷贝传值中,两个变量之间没有任何联系,修改其中一个一个变量的值,原来的变量不变. 例: var arr1 = ["张三",24, ...

  8. 浅析PHP中的闭包和匿名函数

    PHP闭包和匿名函数使用的句法与普通函数相同,但闭包和匿名函数其实是伪装成函数的对象(Closure类的实例) .下面给大家介绍PHP中的闭包和匿名函数知识,需要的朋友参考下吧   闭包是指在创建时封 ...

  9. js进阶js中支持正则的四个常用字符串函数（search march replace split）

    js进阶js中支持正则的四个常用字符串函数(search march replace split) 一.总结 代码中详细四个函数的用法 search march replace split 二.js进 ...

  10. Java 终于在 Java 8 中引入了 Lambda 表达式。也称之为闭包或者匿名函数。

    本文首发于 blog.zhaochunqi.com 转载请注明 blog.zhaochunqi.com 根据JSR 335, Java 终于在 Java 8 中引入了 Lambda 表达式.也称之为闭 ...

随机推荐

  1. 【剑指offer】Q25：二叉树中和为某一值的路径

    说明:最烦的就是看别人的博客,题解里直接上代码,一行分析都没有.只是这个题... class BTNode(): def __init__(self, val = -1): self.val = va ...

  2. hdoj-1421-搬寝室【DP】

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  3. json和XML

    发请求(url) 1.client  ---------------->服务端                发送数据(Json/xml)                      < - ...

  4. 玲珑学院 1050 - array

    1050 - array Time Limit:3s Memory Limit:64MByte Submissions:494Solved:155 DESCRIPTION 2 array is an ...

  5. 【DRF解析器和渲染器】

    目录 解析器 Django中的解析器 DRF中的解析器 DRF中的渲染器 @ *** 解析器 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己想要的数据类型的过程. 本质就是对请求体中的 ...

  6. spring三大框架整合

        Spring概述 Spring介绍 Spring它是一个一站式的分层轻量级框架. Spring体系结构 1.      core container a)        beans与core ...

  7. jquery--new返回值

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. 利用js 获取本日 本周 本月时间代码

    function showToDay() { var Nowdate=new Date(); M=Number(Nowdate.getMonth())+1 alert(Nowdate.getMonth ...

  9. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  10. BZOJ4372: 烁烁的游戏(动态点分治)

    Description 背景:烁烁很喜欢爬树,这吓坏了树上的皮皮鼠.题意:给定一颗n个节点的树,边权均为1,初始树上没有皮皮鼠.烁烁他每次会跳到一个节点u,把周围与他距离不超过d的节点各吸引出w只皮皮 ...