循环内的JavaScript闭合–简单的实际示例

  • Z时代
  • 2024-01-10
  • 分类：问答

var funcs = [];

// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

它输出：

My value: 3

My value: 3

My value: 3

而我希望它输出：

My value: 0

My value: 1

My value: 2

当由于使用事件侦听器而导致功能运行延迟时，会发生相同的问题：

var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  buttons[i].addEventListener("click", function() {
    // each should log its value.
    console.log("My value: " + i);
  });
}
<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

…或异步代码，例如使用Promises：

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));
for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

这个基本问题有什么解决方案？

回答：

嗯，问题在于i每个匿名函数中的变量都绑定到函数外部的相同变量。

经典解决方案：封闭

您要做的是将每个函数中的变量绑定到函数外部的一个不变的值：

var funcs = [];
function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

由于JavaScript中没有块作用域-只有函数作用域-通过将函数创建包装在新函数中，因此请确保“ i”的值保持预期。

ES5.1解决方案：forEach

随着该Array.prototype.forEach功能的使用相对广泛（在2015年），值得注意的是，在那些主要涉及对值数组进行迭代的情况下，.forEach()该方法提供了一种干净自然的方法来为每次迭代获取不同的闭包。也就是说，假设您有某种包含值的数组（DOM引用，对象等），并且出现了针对每个元素设置回调的问题，则可以执行以下操作：

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

这个想法是，与.forEach循环一起使用的回调函数的每次调用都将是其自己的闭包。传递给该处理程序的参数是特定于迭代的特定步骤的数组元素。如果在异步回调中使用它，它将不会与在迭代其他步骤中建立的任何其他回调发生冲突。

如果您碰巧在jQuery中工作，该$.each()函数将为您提供类似的功能。

ES6解决方案： let

ECMAScript

6（ES6）引入了新的let和const关键字，其作用域与var基于变量的作用域不同。例如，在let基于索引的循环中，循环中的每次迭代都会有一个i具有循环范围的新变量，因此您的代码将按预期工作。有很多资源，但是我建议2ality的块定义范围文章作为大量信息来源。

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

但是请注意，IE9-IE11和Edge

14之前的Edge支持，let但是出现了上述错误（它们不会i每次都创建一个新的，因此上面的所有功能都将记录3，就像我们使用一样var）。Edge

14终于正确了。

以上是 循环内的JavaScript闭合–简单的实际示例 的全部内容， 来源链接： utcz.com/qa/418960.html

回到顶部