for循环中var声明导致定时器输出奇特现象的粗略解释

for循环中var声明导致定时器输出奇特现象的粗略解释

代码

for (var i = 0; i < 5; ++i) { 
	setTimeout(() => console.log(i), 0) 
} 

输出的结果是

这看起来不符合直觉，直觉的结果应该是 0 1 2 3 4。

导致这个结果的实际上主要有两个原因

• var申明变量的作用域为函数作用域

  你可能会疑惑，这里也没有函数啊，实际上你可以把这整个代码想成一个大函数，大函数里的变量实际上就是全局变量了。

  所以每次setTimeout里面那个 i 指向的都是同一个 i 。

  但是 你可能会疑惑，是同一个 i 没错，但是 for 循环不就是让 i 的值在变化嘛？那样还是不一样的啊！

  这就引出了以下的原因。

• JS的事件循环机制，每次设置定时器都是往宏任务队列里面塞任务。

  但是宏任务的执行总是晚于当前的同步代码的，如果有微任务的话也会先执行微任务（这里没有微任务，所以不用考虑）

  一个for循环实际上就是一个同步代码。实际上程序会不停地设置五个宏任务，之后才会开始执行宏任务。

  以下输出可以证明宏任务会晚于同步代码

  for (var i = 0; i < 5; ++i) { 
  	setTimeout(() => console.log(`我是宏任务${i}`), 0) 
  }
  console.log("我是同步代码")
  

  

  所以虽然setTimeou设置的时间间隔为0，看起来就在设置好之后立刻执行了，事实上不会的，它会在5个for循环结束后才开始执行。

  执行的时候遇到什么问题了呢？因为console.log(i) 这里的 i 指向就是函数作用域里的 i，而 i 这时已经退出循环 变成 5了，所以输出了5个5。