在 for 循环中初始化的变量的作用域规则

Scoping rules for variables initialized in a for loop

本文关键字：变量 规则 作用域 初始化 for 循环      更新时间：2023-09-26

可能的重复项：
循环内的Javascript闭包 - 简单的实际示例

我正在我的一个项目中使用 setTimeout，以限制向 DOM 添加元素（因此 UI 在页面加载期间不会冻结）。但是，我遇到了一些让我有点困惑的事情。给定此代码：

for(var i = 0; i < 5; i++) {
    var j = i + 10;
    console.log("i is: " + i + " j is: " + j);
    setTimeout(function() {
        console.log("in timeout i is: " + i + " j is: " + j);
    }, i * 1000);
}

我得到以下输出：

i is: 0 j is: 10
i is: 1 j is: 11
i is: 2 j is: 12
i is: 3 j is: 13
i is: 4 j is: 14
in timeout i is: 5 j is: 14
in timeout i is: 5 j is: 14
in timeout i is: 5 j is: 14
in timeout i is: 5 j is: 14
in timeout i is: 5 j is: 14

超时中 i 的值为 5 是显而易见的，因为 i 的作用域为 for 循环初始化。但是，为什么所有超时输出j 14 是？我本以为j会在超时输出 10、11、12、13、14，因为它的作用域在循环内。我怎样才能达到这个结果？

这是因为，在JavaScript中，var具有函数作用域。

var声明将被提升到当前执行上下文的顶部。也就是说，如果它位于函数内部，则var将是函数执行上下文中的范围，否则是程序（全局）执行上下文。

ECMAScript 2015（又名 ES6）引入了let，它允许您创建块作用域变量，但由于它没有得到广泛支持，我只留下链接以供参考。

要仍然使用 var 并将其"作用域"在循环中，一种解决方法是创建新的执行上下文，也称为闭包：

function callbackFactory(i, j) {
    // Now `i` and `j` are scoped inside each `callbackFactory` execution context.
    return function() { // This returned function will be used by the `setTimeout`.
       // Lexical scope (scope chain) will seek up the closest `i` and `j` in parent
       // scopes, that being of the `callbackFactory`'s scope in which this returned
       // function has been initialized.
       console.log("in timeout i is: " + i + " j is: " + j);
    };
}
for(var i = 0; i < 5; i++) {
    var j = i + 10;
    console.log("i is: " + i + " j is: " + j);
    setTimeout( callbackFactory(i, j), i * 1000);
}

由于我在回调作用域内限定了i和j的范围，因此它们将在setTimeout内返回与传递给callbackFactory时相同的值。

请参阅现场演示。

执行相同操作的另一种方法是在for循环中创建 IIFE。这通常更容易阅读，但 JS（H|L）int会对你大喊大叫。 ;)这是因为在循环中创建函数被认为对性能不利。

for(var i = 0; i < 5; i++) {
    var j = i + 10;
    console.log("i is: " + i + " j is: " + j);
    (function(i, j) { // new execution context created for each iteration
        setTimeout(function() {
            console.log("in timeout i is: " + i + " j is: " + j);
        }, i * 1000);
    }(i, j)); // the variables inside the `for` are passed to the IIFE
}

上面我在每次迭代的for内创建了一个新的执行上下文。（演示）

将第一种方法（callbackFactory）与上面的IIFE混合在一起，我们甚至可以做出第三种选择：

for(var i = 0; i < 5; i++) {
    var j = i + 10;
    console.log("i is: " + i + " j is: " + j);
    setTimeout(function(i, j) {
        return function() {
            console.log("in timeout i is: " + i + " j is: " + j);
        };
    }(i, j), i * 1000);
}

这只是使用 IIFE 代替callbackFactory函数。这似乎不太容易阅读，并且仍然在for循环中创建对性能不利的函数，但只是注意到这也是可能的并且有效。

这3种方法在野外很常见。 =]

哦，差点忘了回答主要问题。只需将callbackFactory放在与for循环相同的作用域中，然后不要在其中限定i的范围，而是让作用域链查找外部作用域的i：

(function() {
    var i, j;
    function callbackFactory(j) {
    // the `j` inside this execution context enters it as a formal parameter,
    // shadowing the outer `j`. That is, it is independent from the outer `j`.
    // You could name the parameter as "k" and use "k" when logging, for example.
        return function() {
           // Scope chain will seek the closest `j` in parent scopes, that being
           // the one from the callbackFactory's scope in which this returned
           // function has been initialized.
           // It will also seek up the "closest" `i`,
           // which is scoped inside the outer wrapper IIFE.
           console.log("in timeout i is: " + i + " j is: " + j);
        };
    }
    for(i = 0; i < 5; i++) {
        j = i + 10;
        console.log("i is: " + i + " j is: " + j);
        setTimeout( callbackFactory(j), i * 1000);
    }
}());
/* Yields:
i is: 0 j is: 10  
i is: 1 j is: 11  
i is: 2 j is: 12  
i is: 3 j is: 13  
i is: 4 j is: 14  
in timeout i is: 5 j is: 10  
in timeout i is: 5 j is: 11  
in timeout i is: 5 j is: 12  
in timeout i is: 5 j is: 13  
in timeout i is: 5 j is: 14 */

小提琴

请注意，我已将i和j声明移至范围的顶部，只是为了提高可读性。它与for (var i = [...]具有相同的效果，后者将由解释器吊起。

相关文章：