JavaScript 闭包 : Understanding difference between let and var with an example

Question

这个问题已经有答案了:

What is the difference between "let" and "var"? (40 个回答)

已关闭 6 年前。

虽然我明白let允许您声明范围仅限于 block 的变量，我遇到了 let 之间的奇怪差异和var将其与 javascript 闭包一起使用时。这是我的例子:

与 let :

function buildFunction() {

  var arr = [];
  for(var i = 0; i < 3; i++) {
    let j = i;  //Using let to assign j
    arr.push(
      function(){
        console.log(j);
      }
    )
  }
   return arr;
}

var fs = buildFunction();
fs[0]();
fs[1]();
fs[2]();

上面的代码片段输出:

0
1
2

与 var :

function buildFunction() {

  var arr = [];
  for(var i = 0; i < 3; i++) {
    var j = i;  //Using var to assign j
    arr.push(
      function(){
        console.log(j);
      }
    )
  }
   return arr;
}

var fs = buildFunction();
fs[0]();
fs[1]();
fs[2]();

上面的代码片段输出如下:

2
2
2

我的问题是:

1. 如果您使用var在 block 内并在执行期间为其赋值，它不应该像let一样工作并在内存中存储j的不同副本吗？

2. javascript 是否处理 let和var闭包内有不同的情况吗？

对此的任何澄清将不胜感激。

Answer 1

var函数的范围； let范围为代码块。

在您的示例中 j作用域为函数buildFunction()当你使用 var 时。这意味着您使用“相同”j在每个功能中。当您的 for 循环运行时，j 设置为 0，然后是 1，然后是 2。然后当您运行控制台时，您将引用设置为 2 的 j，因此您会得到 2 2 2 .

当您使用let时，您的范围j到 for 循环的迭代。这意味着每次迭代都有“不同”j ，控制台日志会打印您期望它们打印的内容。

如果您使用 ES5 并且需要使用 var，您可以通过用自执行函数包装原始匿名函数并传递 0 1 2 来复制 let 效果(让它打印 j )。作为参数。这将为j创建一个新的范围。在自执行函数中，其值为当前迭代中j的值。

function buildFunction() {

  var arr = [];
  for(var i = 0; i < 3; i++) {
    var j = i;  //Using var to assign j
    arr.push(
      //self executing function
      (function(j) { //j here is scoped to the self executing function and has the value of j when it was called in the loop. Any changes to j here will not affect the j scope outside this function, and any changes to j outside this function will not affect the j scoped inside this function.
        //original function
        return function() {
          console.log(j);
        }
      })(j) //call with the value of j in this iteration
    )
  }

  return arr;
}

var fs = buildFunction();
fs[0]();
fs[1]();
fs[2]();