Var vs let:这个JavaScript片段是如何工作的

Var vs let: how does this JavaScript snippet work?

本文关键字：何工作 工作 let vs 这个 片段 JavaScript Var      更新时间：2023-09-26

我在网上读一篇文章时看到了这个:

// 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工作。

代码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"

相关文章：