以前看到的一个问题,很有意思:

    for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
},500);
}

    循环5个setTimeout, 你会发现console.log的值都是5. 为什么呢,因为setTimeout是个异步函数,for在执行的时候会直接跳过,很明显这里是先执行了循环,setTimeout才开始执行,这个时候变量i 的值已经是5了,所以接连输出5个5.

    但是我们不需要这样的结果,我们希望每个i在每个setTimeout的值跟随for循环来变,于是:

    for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 500);
})(i);
}

    我们使用了一个闭包的匿名函数,每次循环的时候将变量i传进这个“封闭”着的函数里,这样setTimeout里面使用到的i的每个值都不一样,用我的理解就是,闭包使 i 独立了,外部依次传入5个不同的I,这个5个i彼此隔离,在自己的setTimeout里被使用。

    关于闭包是什么,网上有很多解答, http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html  这个人讲得挺细的了

    

    


    回到主题,上面为了是每个setTimeout里输出的值都是当前循环里的值,使用到了闭包,但是还有一种简洁的写法:

    

    for (let i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 500);
}

    使用let以后i的作用域就变成块级作用域了,setTimeout里的每个i都是当前循环里的i,所以最后得到的结果就不是同一个了,而是我们想要的结果!

    

JS闭包以及作用域初探的更多相关文章

  1. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  2. 那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号。

    之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...

  3. js 闭包,作用域,this 终结篇(转)

    之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...

  4. JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

    补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变 ...

  5. 聊一下JS中的作用域scope和闭包closure

    聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...

  6. 对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?

    首先先引用<JavaScript权威指南>里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 因此,就出现了如下的几串代码: ...

  7. JS中的作用域和闭包

    作用域:在编程语言中,作用域控制着变量与参数的可见性及生命周期.JS确实有函数作用域,那意味着定义在函数中的参数和变量在函数外部是不可见的,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是 ...

  8. [ JS 进阶 ] 闭包,作用域链,垃圾回收,内存泄露

    原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --< ...

  9. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

随机推荐

  1. socket网络编程之不间断通信

    socket是python提供的一种网络通信方式. socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议 ...

  2. C#计算时间差 TimeSpan

    TimeSpan的相关属性 Add:与另一个TimeSpan值相加. Days:返回用天数计算的TimeSpan值. Duration:获取TimeSpan的绝对值. Hours:返回用小时计算的Ti ...

  3. mysql性能排查思路

      mysql性能瓶颈排查 top/free/vmstat/sar/mpstat 查看mysqld进程的cpu消耗占比 确认mysql进程的cpu消耗是%user, 还是sys%高 确认是否是物理内存 ...

  4. VS2017做为Unity3D的脚本编辑器需要的最精简组件

    前言 使用VS2017做为Unity的脚本编辑器,需要的最精简组件. 我的测试环境 windows 10 x64 windows 7 x64 sp1 时间:2017-4-22 更新于2018-12-4 ...

  5. adb连接手机模拟器

    首先,要保证模拟器和电脑在同一网段(手机模拟器设置为桥接模式即可) 我使用的是夜神模拟器. 然后查看一下adb版本, adb version 需要1.0.31往上的版本才能连接. 然后输入 adb c ...

  6. JavaScript -- 时光流逝(一):数据类型,变量,类型转换,函数

    JavaScript -- 知识点回顾篇(一):数据类型,变量,类型转换,函数 1. 数据类型 Boolean:值类型,布尔(逻辑)只能有两个值:true 或 false. Number:值类型,Ja ...

  7. SQLServer插入数据

    使用数据库管理工具插入数据 打开数据库,选则要插入数据的表->右键点击->选择插入前200行->在右边视图中输入要插入的数据(如果字段设置为不为空,则必须输入,如果字段设置为可空,则 ...

  8. Mac轻量级服务器http-server

    刚想跑个Vue页面,发现我本地没有应用服务器(Tomcat/IIS...) 于是想下载了Tomcat,才发现我没有装JDK,而Mac的JDK下得好久,都下不下来,想想算了. 于是在网上找个轻量级的服务 ...

  9. Vmware12安装centos系统详解

    vmware12安装centos7系统详解 用虚拟机12安装centos7系统详细安装过程,后附centos7下载地址. 工具/原料 虚拟机12 centos7系统镜像 方法/步骤 1 1.百度搜索c ...

  10. 制作CSS绚烂效果的三种属性

    animation(动画).transition(过渡).transform(变形) https://www.cnblogs.com/shenfangfang/p/5713564.html