Javascript函数范围[Javascript Essentials]

Question

我正在看Travis Tidwell的Javascript Essentials,他解释了这段代码:

(function() {
    var messages = ['hello', 'there'];

    for (var i in messages) {
        setTimeout(function() {
            console.log(messages[i]);
        }, 10); 
    };
})();

它在控制台中回响了'那里'两次,但我仍然不明白为什么.有人可以一步一步地浏览这段javascript吗？

Answer 1

每次代码绕过循环时,它都会设置一个事件处理程序,以便在经过10ms后,它会记录值messages[i].

在超过任何这些超时的10ms之前,已经将值i(通过for循环)更改为1(因为这是数组中的最后一个属性名称).

然后输出第一个超时,然后输出messages[1]第二个超时输出messages[1].

1. 创建并存储数组 messages
2. i设置为0并设置超时
3. i设置为1并设置超时
4. 第一次超时功能运行,i仍然是1
5. 第二次超时功能运行,i仍然是1