JavaScript中setTimeout为何未获取到变量更新后的最新值？

问题1 解答 #

你调用setTimeout时传入的第三个参数，是指定给回调函数的入参，这个参数的取值会在setTimeout调用的瞬间完成计算、拷贝传递。你调用setTimeout时变量a的取值是10，相当于直接把10这个值预传给了foo的形参myvar，后续修改a为20的操作，不会影响已经拷贝传递的参数值，因此最终输出10。

问题2 解答 #

这个场景下你没有给setTimeout的回调函数传参，回调里的i是直接引用外层作用域的变量，没有做值拷贝。同时你用var声明i，var不存在块级作用域，整个循环过程中操作的都是全局/外层函数作用域下的同一个i变量。
setTimeout属于异步宏任务，会等待所有同步代码执行完成后才会执行回调，等1秒后回调触发时，循环已经执行完毕，i的取值已经被更新为3，三个回调读取的都是同一个i的当前值，因此全部输出3。

两个场景的核心差异 #

• 第一个场景是值拷贝传参：调用setTimeout时就把a的当前值拷贝后预传给回调，后续变量的修改不会影响已传递的参数
• 第二个场景是变量引用：回调直接绑定外层的同一个变量，直到异步回调执行时才读取变量的当前值，拿到的是变量最终的更新结果

内容的提问来源于stack exchange，提问作者Akrit