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. Android自己定义视图（一）：带下划线的TextView

    package com.francis.underlinetextviewtest; import android.content.Context; import android.content.re ...

  2. 洛谷P1720 月落乌啼算钱

    目背景 (本道题目木有以藏歌曲……不用猜了……) <爱与愁的故事第一弹·heartache>最终章. 吃完pizza,月落乌啼知道超出自己的预算了.为了不在爱与愁大神面前献丑,只好还是硬着 ...

  3. Kinect 开发 —— 面部识别

    EmguCV库也能用来进行面部识别(face identify).实际的面部识别,就是将一张图像上的人物的脸部识别出来,这是个很复杂的过程,具体过程我们这里不讨论.对一幅影像进行处理来找到包含脸部的那 ...

  4. Linux运维命令总结

    .什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常, 在他运转的过程中,对他进行维护,他集合了网络.系统.数据库.开发.安全.监控于一身 ...

  5. 6.Windows 二进制文件 (.exe)安装--终端安装

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/n ...

  6. 关于mybatis里面的Executor--转载

    原文地址:http://blog.csdn.net/w_intercool/article/details/7893344 使用mybatis查寻数据,跟踪其执行流程 最开始执行的语句 this.ge ...

  7. Mysql数据库存储引擎--转

    原文地址:http://pangge.blog.51cto.com/6013757/1303893 简单介绍 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是My ...

  8. Day2下午解题报告

    预计分数:100+100+30=230 实际分数:100+100+30=230人品爆发&&智商爆发&&手感爆发 T3数据好水,,要是把数组开大一点的话还能多得10分,, ...

  9. Vue的学习--怎么在vue-cli中写网页

    vue.min.js和vue-cli的区别和联系我现在还是没有太清楚,大概是还没搞清楚export default和new Vue的区别,先浅浅记录一下怎么“用vue-cli来写网页”. “vue-c ...

  10. Python 之Numpy应用

    NumPy 数据类型 numpy 支持的数据类型比 Python 内置的类型要多很多,基本上可以和 C 语言的数据类型对应上,其中部分类型对应为 Python 内置的类型.下表列举了常用 NumPy ...