JS闭包以及作用域初探
以前看到的一个问题,很有意思:
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闭包以及作用域初探的更多相关文章
- js闭包的作用域以及闭包案列的介绍:
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- 那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号。
之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...
- js 闭包,作用域,this 终结篇(转)
之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...
- JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变 ...
- 聊一下JS中的作用域scope和闭包closure
聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...
- 对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?
首先先引用<JavaScript权威指南>里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 因此,就出现了如下的几串代码: ...
- JS中的作用域和闭包
作用域:在编程语言中,作用域控制着变量与参数的可见性及生命周期.JS确实有函数作用域,那意味着定义在函数中的参数和变量在函数外部是不可见的,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是 ...
- [ JS 进阶 ] 闭包,作用域链,垃圾回收,内存泄露
原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --< ...
- JS详细图解作用域链与闭包
JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...
随机推荐
- strlen strcat strcpy strcmp 自己实现
strlen strcat strcpy strcmp 自己实现 strlen include <stdio.h> #include <string.h> #include & ...
- puppet 横向扩展(三)
Table of Contents 1. 概述 2. 实验环境 3. 实验步骤 3.1. 机器B 的配置 3.2. 机器A 的配置 3.3. 测试配置结果 概述 横向扩展实验之三 – 将CA 认证服务 ...
- Linux 小知识翻译 - 「LDAP」
这次聊聊「LDAP」. LDAP是「Lightweight Directory Access Protocol」的所有,从名字上可以看出是协议的一种. LDAP是访问数据库(层次型数据库)的组件.管理 ...
- Java高级教程02
目录 1.Java线程 1.1. 多线程和多进程 1.2. 线程的执行过程: 1.3. 创建线程的方法 (1). 方法1:通过run() (2). 方法2: 复写Runnable接口(推荐) 1.4. ...
- keepalived脑裂问题查找
在自己环境做keepalived+redis实验时,当重启了备用redies机器后,发现两台redies主机都拿到了VIP [root@redis2 ~]# ip addr list 1: lo: & ...
- ORC Creation Best Practices
Short Description: ORC Creation Best Practices with examples and references. Article Synopsis. ORC i ...
- 小程序背景图片bug
在pc端调试的时候已经可以看到出现背景图片了,但是在真机调试的时候却发现没有背景图片,那么原因是什么呢?真机调试和vconsole也看不出什么鸟,其实这是小程序的一个bug.另一种说法是:backgr ...
- Numpy 模块的应用
数据分析三剑客: Numpy, Pandas, Matplotlib NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数 ...
- Mysql 数据库设置三大范式 数据库五大约束 数据库基础配置
数据库设置三大范式 1.第一范式(确保每列保持原子性) 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库满足第一范式. 第一范式的合理遵循需要根据系统给的实际需求 ...
- hystrix
<servlet> <display-name>HystrixMetricsStreamServlet</display-name> <servlet-nam ...