带闭包的 JavaScript 作用域：帮助我理解

Question

运行以下代码：

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

输出“3”三次。它输出 i 的最终值，而不是创建内部函数时 i 的值。

如果我希望输出为1、2和3，我该如何编写这段代码？如何让它使用定义函数时的 i 值而不是其最终值？

Answer 1

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

因此，在 setTimeout 时（在我们定义 setTimeout 函数时），我们调用以 val 作为参数的匿名函数。这为每个函数调用创建了一个闭包，将 val 的值存储在我们刚刚调用的函数的范围内。我使用了 self-调用函数，它会立即创建一个闭包。

在您提供的代码中，代码创建了一个闭包，但是对于整个代码的更大范围，因此 i 对于整个代码来说是本地的，这意味着在运行时，匿名函数将使用其余代码使用的变量i。

Answer 2

function f(i){
  return function(){console.log(i);};
}

for (var i=0; i<3; i++) { 
   setTimeout( 
     f(i)
   , 500 ); 
}

Answer 3

显式闭包的现代替代方案（当您有一个双层包装函数时，读起来可能会有点麻烦）是 Function#bind。一旦您获得支持 对于尚未执行 ECMAScript 第五版的浏览器，您可以说：

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

window 是 this 将在函数内部的值（您不需要这里的 this ，所以我们只使用默认的全局对象）。如果您只是调用另一个函数/方法，就像这里使用 console.log 一样，您可以使用它来完全删除函数表达式：

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

Answer 4

选择：

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