循環內的 JavaScript 閉包會破壞變數作用域嗎？

JavaScript Closures inside Loops: A Simple Practical Example

In JavaScript, a common issue arises when using loops to create functions that log their index or value. Despite intending to log different values, all functions often end up logging the same value due to the nature of variable scoping.

The Problem

Consider the following code:

<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>

Instead of outputting "My value: 0", "My value: 1", and "My value: 2", it logs "My value: 3" three times. This behavior persists across different scenarios, including using event listeners or asynchronous code.

Solution 1: ES6 let

ES6 introduces the let keyword, which creates variables scoped to their enclosing block. Using let in the loop ensures that each function has its own distinct variable:

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

Solution 2: ES5.1 forEach

For scenarios involving iterating over arrays, the forEach method provides a convenient solution. Each callback in the forEach loop has its own closure, providing a unique variable for each iteration:

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

Solution 3: Classic Closures

In older JavaScript versions, closures can be used to bind a variable to a specific value within a function:

<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中文網其他相關文章！