Web前端TIPS:循环中的闭包

Web前端TIPS:循环中的闭包，大家来了解下吧。

如果你碰到过这种情况：

JavaScript 代码：

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("i value is" + i);
  };
}
funcs[0]();
funcs[1]();
funcs[2]();

你预期的输出是：

JavaScript 代码:

i value is 0
i value is 1
i value is 2

而实际的输出却是：

JavaScript 代码:

i value is 3
i value is 3
i value is 3

原因是闭包的捕获机制 以及 i 在内部进行表示。要解决这个问题，你可以这么做：

JavaScript 代码:

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = (function(value) {
    console.log("i value is " + i);
  })(i);
}

上述代码有效地复制 i 的值将其传递给闭包。或者你可以这么做：

JavaScript 代码：

for (let i = 0; i < 3; i++) {
  console.log("i value is " + i);
}

在这里，let 将变量作用域限制在 for 循环中，并在每次迭代中生成一个新的值，因此，我将按照预期的那样在闭包中绑定不同的值。