面试题引发的思考
一道很经典的面试题:
for(var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i)
}, 1000)
}
输出5个5,因为setTimeout为宏任务,此时全局i为5。
其中一个解决办法是将var改为es6的let, 在es5中就得用立即执行函数来解决
立即执行函数
通常有两种写法:
- (function(){})(i)
- (function(){…}(i))
用立即执行函数来改造上面的代码,让其输出01234
for(let i = 0; i < 5; i++) {
setTimeout((function () {
console.log(i)
})(i), 1000)
}
但原理是什么呢?
通过这两个图对比我们可以看到,立即执行函数被推入到宏任务队列后,当开始执行时,立即执行函数有一个作用域,此时存在一个变量就是当时的i,然后就去执行该函数,打印i,在当前函数作用域内没有找到,于是就往父级找,父级为立即执行函数作用域,找到了i,这个关系可以从图中的调用栈信息Call Stack可以看出。