循环内的 JavaScript 闭包会破坏变量作用域吗？

循环内的 JavaScript 闭包：一个简单的实际示例

在 JavaScript 中，使用循环创建记录其索引或值的函数时会出现一个常见问题。尽管打算记录不同的值，但由于变量作用域的性质，所有函数最终通常都会记录相同的值。

问题

考虑以下代码：

<code class="javascript">var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j](); // Outputs: "My value: 3" three times
}</code>

它不是输出“我的值：0”、“我的值：1”和“我的值：2”，而是记录“我的值：3”三次。此行为在不同场景中持续存在，包括使用事件侦听器或异步代码。

解决方案 1：ES6 let

ES6 引入了 let 关键字，该关键字创建作用域为其封闭块的变量。在循环中使用 let 可确保每个函数都有自己不同的变量：

<code class="javascript">for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

解决方案 2：ES5.1 forEach

对于涉及迭代数组的场景，forEach方法提供了一种方便的解决方案。 forEach 循环中的每个回调都有自己的闭包，为每次迭代提供唯一的变量：

<code class="javascript">someArray.forEach(function(arrayElement) {
  console.log("My value:", arrayElement);
});</code>

解决方案 3：经典闭包

在较旧的 JavaScript 版本中，可以使用闭包将变量绑定到函数中的特定值：

<code class="javascript">var funcs = [];

function createfunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}</code>

以上是循环内的 JavaScript 闭包会破坏变量作用域吗？的详细内容。更多信息请关注PHP中文网其他相关文章！