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的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...
随机推荐
- 第八章 Hyper-V 2012 R2 故障转移群集
和终端用户相比,企业用户对于业务的连续性和可靠性更为在意.相对而言,企业一般不会将追逐单一硬件的性能排在第一位. 如何衡量业务是否持续可用,一般使用"x 个 9"这种方式来定义.如 ...
- May 31. 2018 Week 22nd Thursday
The good seaman is known in bad weather. 惊涛骇浪,方显英雄本色. As we all know, the true worth of a person is ...
- 【PS技巧】如何拼图
1.材料准备 根据对图片的内容表达,粗略的“计划”,每张图片摆放位置及尺寸.C与D等高,C/D与B叠高后与A等高.C与D叠宽后与B等宽. 2.记录每张图片原始大小 (1)双击工作区,打开待拼接图片 ( ...
- Kafka 0.11新功能介绍:空消费组延迟rebalance
Kafka 0.11新功能介绍:空消费组延迟rebalance 在0.11之前的版本中,多个consumer实例加入到一个空消费组将导致多次的rebalance,这是由于每个consumer inst ...
- ES5-ES6-ES7_Promise对象详解
Promise对象概述(什么是Promise) Promise 是异步编程的一种解决方案,比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise,简单说就是一个容器,里面保存着某 ...
- 【CQOI2014】危桥
[CQOI2014]危桥 Description Alice和Bob居住在一个由N个岛屿组成的国家,岛屿被编号为\(0\)到\(N-1\).某些岛屿之间有桥相连,桥上的道路都是双向的,但是一次只能供一 ...
- Mysql 关键字的优先级 分组 多表联查
查看模式 select @@global.sql_mode; 关键字的优先级 from 来自 where 条件 group by 分组 having 筛选 select 查询 distinct 去重 ...
- java实现谷歌二步验证 (Google Authenticator)
准备: 一个谷歌二步验证APP, 我用的是ios 身份宝 资料: 1.Google Authenticator 原理及Java实现 //主要参考 https://blog.csdn.net/li ...
- centos7下安装docker(15.2跨主机网络-overlay)
为支持容器跨主机通信,Docker提供了overlay driver,使用户可以创建基于VxLAN的overlay网络.VxLAN可将二层数据封装到UDP进行传输,VxLAN提供与VLAN相同的以太网 ...
- Springboot监控之一:SpringBoot四大神器之Actuator
介绍 Spring Boot有四大神器,分别是auto-configuration.starters.cli.actuator,本文主要讲actuator.actuator是spring boot提供 ...