js问题：for循环中的setTimeout（详解）

问题描述

话不多说，先看问题：（来源于牛客网）

for(let i=0;i<2;i++){
    setTimeout(function(){
    console.log(i)
    },100);
}
for(var i=0;i<2;i++){
    setTimeout(function(){
        console.log(i)
    },100);
}

可以先思考一下······

F12看一下正确结果：0 1 2 2

 然后开始纳闷，两个for循环只有let和var不同却引起结果如此不同

纳闷完开始思考为什么？

该问题涉及事件循环、变量提升、块级作用域等知识点

详解

第一个for循环

 首先let声明的变量具有块级作用域，且不存在变量提升

1. 由于js的事件循环 ，进入for循环，执行let i =0，在内存中开辟空间存入 i 。i <2 ,满足条件执行循环体，这里因为setTimeout函数是宏任务，故将其放如任务队列中，先不执行；
2. 执行i++，因为let具有块级作用域，故创建一个新的作用域，在内存中开辟空间存入 i 为1。满足i < 2执行循环体，又遇到setTimeout，同样先不执行将其放到任务队列中；
3. 再执行i++，let具有块级作用域，故创建一个新的作用域，在内存中开辟空间存入 i 为2，不满足条件退出循环，for循环退出执行栈；
4. 此时查看任务队列，执行任务队列中的代码，将第一个放入的setTimeout放到执行栈中执行，执行console.log(i)，此时由于存在块级作用域，所以找到块级作用域中的局部变量 i ，此时i为0，输出0，执行完成后该setTimeout退出执行栈；
5. 同第四步，将任务队列的另一个setTimeout放到执行栈中执行，找到块级作用域中的局部变量 i  ，此时i为1，输出1

第二个for循环

首先var声明的变量没有块级作用域，且存在变量提升

故for循环中var声明的变量是全局变量，上述代码相当于：

var i；
for( i=0;i<2;i++){
    setTimeout(function(){
        console.log(i)
    },100);
}

1. 由于js的事件循环，先执行var i，进入for循环，i =0，i <2 ,满足条件执行循环体，这里因为setTimeout函数是宏任务，故将其放如任务队列中，先不执行；
2. 执行i++，内存中 i 的值变为1，满足i < 2执行循环体，又遇到setTimeout，同样先不执行将其放到任务队列中；
3. 再执行i++，内存中 i 的值变为2，不满足条件退出循环，for循环退出执行栈；
4. 此时查看任务队列，执行任务队列中的代码，将第一个放入的setTimeout放到执行栈中执行，执行console.log(i)，此时由于没有块级作用域，所以向上找到全局变量 i ，此时内存中i为2，输出2，执行完成后该setTimeout退出执行栈；
5. 同第四步，将任务队列的另一个setTimeout放到执行栈中执行，向上找到全局变量 i ，此时内存中i为2，输出2

         执行栈中的for循环中i的内存变化，这里的i为全局变量，执行for循环时i的值会被覆盖。

 

 总结

• for循环中var声明的变量是全局变量，而let声明的变量是局部变量
• 当在 for 循环中使用 let 声明变量时，每次循环迭代都会为变量创建一个新的内存空间。这是因为 let 声明具有块级作用域，每次循环迭代都会创建一个新的作用域。变量只在当前循环迭代的块内部可见，循环结束后，作用域和变量都会被释放。而var会共享一个变量。