解释var的范围及其在JavaScript中的循环工作方式

Question

有人可以解释一下这段代码如何执行吗？我熟悉var和let的范围，因为var具有function block的范围，而let具有enclosing block的范围。 即使我知道这一点，也无法将自己的头缠在这上面。

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

我的理解是，在第一次迭代中，i是0。 setTimeout会在0秒后调用该函数以记录0，在下一次迭代中，i的值为1，而{{1 }}在setTimeout秒后调用该函数以记录1，依此类推。我希望它记录0，0，1。

但是实际上，它输出2，3，3。怎么发生的？

我知道解决方案是使用3，但是我仍然不明白为什么let在这种情况下不起作用。