可能还是很多同学没有理解下面的三段代码,今天从原理分析一下
var
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
// 10 10 10 10 10 10 10 10 10 10
知识点:
- js只有全局作用域和函数作用域
- var存在变量提升
- 函数调用会形成一条作用域链,参数会沿着这个链条查找
图解步骤
初始状态,注意scope是指向定义函数的地方
![](https://img-blog.csdnimg.cn/img_convert/522c0ed8fff1ff137f2c7228856e128c.webp?x-oss-process=image/format,png)
执行for循环之后,i变成了10
![](https://img-blog.csdnimg.cn/img_convert/6f28e0c7877cc4e0d3ebbb716a114c36.webp?x-oss-process=image/format,png)
开始执行setTimeout回调,因为AO活动对象上没有i,所以会从作用域链上查找,此时window上的i已经是10
![](https://img-blog.csdnimg.cn/img_convert/1c0108f079b28b609913018a0914ffec.webp?x-oss-process=image/format,png)
立即执行
for (var i = 0; i < 10; i++) {
// capture the current state of 'i'
// by invoking a function with its current value
(function(i) {
setTimeout(function() { console.log(i); }, 100 * i);
})(i);
}
// 0 1 2 3 4 5 6 7 8 9
知识点
- 闭包可以获取外层函数作用域的变量
图解步骤
初始状态,注意scope是指向定义函数的地方
![](https://img-blog.csdnimg.cn/img_convert/00fc20366caf8dae44c7aec5936914a0.webp?x-oss-process=image/format,png)
执行立即执行函数
![](https://img-blog.csdnimg.cn/img_convert/ab69417a7b826072ad4e9ddcdbec94f8.webp?x-oss-process=image/format,png)
立即执行函数执行完毕,出栈,注意此时AO活动对象并不会被销毁,而是暂存起来等待被调用
![](https://img-blog.csdnimg.cn/img_convert/b61740b14832e99dc3dd0432062082b1.webp?x-oss-process=image/format,png)
执行下一个循环, i = 1
![](https://img-blog.csdnimg.cn/img_convert/8055bf643ad6c6c1b59c0b7ef82e43ca.webp?x-oss-process=image/format,png)
立即执行函数执行完毕,出栈,注意此时AO活动对象并不会被销毁,而是暂存起来等待被调用
![](https://img-blog.csdnimg.cn/img_convert/b5a775cfc533cdb4be8cb7dd651fab30.webp?x-oss-process=image/format,png)
重复以上步骤,直到i=10,停止循环
接下来就是执行setTimeout回调
因为setTimeout回调里没有i,所以从作用域链上查找,所以输出0
![](https://img-blog.csdnimg.cn/img_convert/933e046af2f3672e6144f9ebdcda76c8.webp?x-oss-process=image/format,png)
接下来依次执行i = 1,2,3...时的setTimeout回调,同上
let
for (let i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
// 0 1 2 3 4 5 6 7 8 9
知识点
- let会形成块级作用域
- 每次迭代都会创建这样一个新作用域
图解步骤
初始状态
![](https://img-blog.csdnimg.cn/img_convert/e1bf50418f0e78b0ff86a9ab610fa534.webp?x-oss-process=image/format,png)
下一个循环
![](https://img-blog.csdnimg.cn/img_convert/8fa3db9d4ae21585617171b72c290067.webp?x-oss-process=image/format,png)
继续循环,直到10
接下来执行setTimeout回调
![](https://img-blog.csdnimg.cn/img_convert/712e391250d4340770ae38f8937dc7fd.webp?x-oss-process=image/format,png)
1~9同理