javascript - 绕过 JavaScript 中回调的变量提升

Question

这个问题已经有答案了:

Javascript infamous Loop issue? [duplicate] (5 个回答)

已关闭 9 年前。

我对Javascript的理解是变量具有函数作用域，而不是 block 作用域，因此 block 内声明的变量被提升到其上方的函数。这个article给出以下代码示例:

var arr = [1, 2, 3, 4]  
for(var i = 0; i < arr.length; i++) { 
  var entry = arr[i];
  setTimeout(function() {
    console.log(entry);
  }, 100);
}

文章指出代码被翻译成以下内容，因此变量 entry每次迭代之间都是通用的。结果是4被记录到控制台四次

var arr, i, len, entry;
arr = [1, 2, 3, 4]  
for(i = 0; i < arr.length; i++) {  
  entry = arr[i];
  setTimeout(function() {
    console.log(entry);
  }, 100);
}

我的问题是，如果我希望每次调用setTimeout，我应该如何重写代码记录与 arr 不同的值？

Answer 1

您可以将setTimeout更改为:

setTimeout(
   (function()
      {
          var entry = arr[i];
          return function() {console.log(entry);}
      }
   )()
);

这样，您就创建了一个新范围，并且 entry 位于该范围内。

您还可以这样做:

(function(e)
    {
        setTimeout(function(){console.log(e);});
    }
)(entry);

这也创建了一个新的范围，e 位于其中。

还有另一种选择:

setTimeout(
    (function(e)
        {
            return function() {console.log(e);};
        }
    )(entry);
);

在所有情况下，您都使用立即调用的匿名函数，因此唯一的副作用是您正在创建一个新作用域。

(编辑:为了可读性进行了一些重新格式化，并添加了更多解释)