还记得这张const、let、var比较的表格吗
是不是觉得没什么问题了?来看看下面的程序:
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i);
})
} // 5 5 5 5 5
for(let i=0;i<5;i++){
setTimeout(function(){
console.log(i);
})
}// 0 1 2 3 4
首先需要被提及的是setTimeout
的事件机制,我们都知道js是单线程的,在它的事件队列中,同步优先于异步优先于回调。
事件循环与任务队列 事件循环只有一个,但任务队列可能有多个,任务队列可分为宏任务(macro-task)和微任务(micro-task)。XHR回调、事件回调(鼠标键盘事件)、setImmediate、setTimeout、setInterval、indexedDB数据库操作等I/O以及UI rendering都属于宏任务(也有文章说UI render不属于宏任务,目前还没有定论),process.nextTick、Promise.then、Object.observer(已经被废弃)、MutationObserver(html5新特性)属于微任务。注意进入到任务队列的是具体的执行任务的函数。比如上述例子setTimeout()中的timer函数。另外不同类型的任务会分别进入到他们所属类型的任务队列,比如所有setTimeout()的回调都会进入到setTimeout任务队列,所有then()回调都会进入到then队列。当前的整体代码我们可以认为是宏任务。事件循环从当前整体代码开始第一次事件循环,然后再执行队列中所有的微任务,当微任务执行完毕之后,事件循环再找到其中一个宏任务队列并执行其中的所有任务,然后再找到一个微任务队列并执行里面的所有任务,就这样一直循环下去。
而为什么用var
和let
定义i
会出现不同的结果呢?答案出在作用域上。
var
的作用域是函数级的,不属于for循环,当for循环结束开始调用函数回调的时候,就会往上寻找需要的i,最后找到了global下的i,此刻i为5。let
的作用域是块级的,所以每一次 for 循环,console.log(i); 都引用到 for 代码块作用域下的i,因为这样被引用,所以 for 循环结束后,这些作用域在 setTimeout 未执行前都不会被释放。那么在ES6之前,是怎么解决这个问题的呢?