Var vs let:这个JavaScript代码段是如何工作的？

Question

当我遇到这个时,我正在网上阅读一篇文章:

// Sample 2
var funcs = [];

for(let x=0; x<3; x++) { 
  funcs.push(() => x); 
}

funcs.forEach(f => console.log(f()));
// Output: 0, 1, 2
// when using var instead of let in the for-loop: 3, 3, 3

有人可以解释为什么这有效吗？我会想到同样会发生var......

我知道之间的区别var和let.我问的是为什么它不起作用var.

Answer 1

代码for (var x=...)声明了一个值,该值的值发生了变化,但是对于每个创建的函数都会关闭.所有函数都引用相同的值及其最新更改.使用略微较旧的代码有望使这更明显:

var callbacks = [];
for (var i=0;i<5;++i) callbacks.push( function(){ console.log(i) } );
callbacks.forEach(function(func){ func() })
// Outputs "5" five times

for (let x=...)每次循环运行时,代码都会声明一个新变量,因此每个函数都会获得一个新变量(和相关值).这在创建回调时非常方便,因此您不必执行以下旧方法:

    var callbacks = [];
    for (let i=0;i<5;++i){
      // Create an anonymous function and invoke it, passing in 'i'.
      // Each time the function is run a *new* variable named 'n'
      // is created and closed over by the function returned inside.
      var cb = (function(n){ return function(){ console.log(n) }})(i);
      callbacks.push(cb);
    }
    callbacks.forEach(function(func){ func() })
    // Outputs "0","1","2","3","4"

并且,为了证明,这里使用let:

    var callbacks = [];
    for (let i=0;i<5;++i) callbacks.push( function(){ console.log(i) } );
    callbacks.forEach(function(func){ func() })
    // Outputs "0","1","2","3","4"