了解循环中的 JavaScript 闭包：实际示例

了解循环中的 JavaScript 闭包：实际示例
了解循环中的 JavaScript 闭包：实际示例
Arthur Petit
2024年7月5日星期五 上午10:26:26

解开 JavaScript 中的循环闭包

JavaScript 开发人员在循环内使用闭包时经常会遇到意外行为。这个问题可能会导致混乱，特别是对于那些刚接触闭包概念的人来说。

在本文中，我们将探讨一些实际示例，这些示例说明了常见的陷阱，并提供了在循环中有效使用闭包的解决方案，无论是处理事件侦听器、异步代码还是遍历数组。

命令 描述
let 声明一个块作用域的局部变量，可以选择将其初始化为一个值。用于确保循环的每次迭代都有自己的范围。
const 声明一个块范围的只读命名常量。用于创建其值不应更改的函数或变量。
Promise 表示异步操作的最终完成（或失败）及其结果值。
setTimeout 在指定的毫秒数后调用函数或计算表达式。
addEventListener 将事件处理程序附加到指定元素，而不覆盖现有的事件处理程序。
IIFE 立即调用函数表达式。定义后立即运行的函数。用于在循环中创建局部作用域。
for...in 以任意顺序迭代对象的可枚举属性。
for...of 按特定顺序迭代可迭代对象（如数组或字符串）的值。

了解循环中的 JavaScript 闭包

前面的示例中提供的脚本解决了 JavaScript 中循环内闭包的常见问题。当使用 var 在循环内声明，所有迭代共享相同的函数范围。这就是为什么在第一个示例中，输出是“My value: 3”三次。解决方案是使用 let，它创建一个块作用域，为每次迭代维护正确的值。这种方法确保每次迭代都有自己的范围，从而在调用函数时保留正确的值。该脚本演示了如何更改声明 var 到 let 纠正问题并按预期记录“我的值：0”、“我的值：1”和“我的值：2”。

对于异步代码，可能会出现相同的闭包问题。使用 Promises 和 setTimeout 函数与 let 确保每个异步调用维护正确的迭代值。该脚本显示，通过使用 wait 和 let，每个已解决的承诺都会记录预期值。事件监听器也可能面临类似的问题；但是，将侦听器函数包装在 IIFE （立即调用函数表达式）通过为每次迭代创建新范围来帮助捕获正确的值。指某东西的用途 for...in 和 for...of 循环进一步证明了闭包中作用域的重要性，展示了如何使用正确捕获索引和值 IIFE 为每个循环迭代创建不同的范围。

使用 let 解决 JavaScript 循环中的闭包问题

JavaScript (ES6)

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

确保异步代码中正确的闭包值

JavaScript (ES6)

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

使用 IIFE 正确关闭事件侦听器

JavaScript (ES6)

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

使用 for...in 和 for...of 循环正确关闭

JavaScript (ES6)

const arr = [1, 2, 3];
const fns = [];
for (const i in arr) {
  fns.push(((i) => () => console.log("index:", i))(i));
}
for (const v of arr) {
  fns.push(((v) => () => console.log("value:", v))(v));
}
for (const n of arr) {
  const obj = { number: n };
  fns.push(((n, obj) => () => console.log("n:", n, "|", "obj:", JSON.stringify(obj)))(n, obj));
}
for (const f of fns) {
  f();
}

探索高级 JavaScript 函数中闭包的使用

闭包是 JavaScript 中的一个基本概念，它允许函数从其封闭范围访问变量，即使该范围已经关闭。在创建高级函数（例如记忆化、柯里化和函数式编程中使用的函数）时，此功能特别强大。例如，记忆化利用闭包来记住昂贵的函数调用的结果，并在相同的输入再次发生时返回缓存的结果。通过利用闭包，我们可以创建更高效​​、更优化的代码来提高性能，特别是在计算斐波那契数列等递归函数中。

闭包的另一个高级用途是在 JavaScript 对象中创建私有变量和函数，模拟私有方法和属性。这种技术通常用在模块模式和立即调用函数表达式（IIFE）中，以封装功能并避免污染全局范围。此外，闭包在事件处理和异步编程中发挥着至关重要的作用，它们有助于随着时间的推移保留状态和上下文。理解并有效利用闭包可以显着提高您的 JavaScript 编程技能，并使您能够编写更加模块化、可重用和可维护的代码。

有关 JavaScript 闭包的常见问题

  1. JavaScript 中的闭包是什么？
  2. 闭包是一个保留对其词法作用域的访问的函数，即使该函数是在该作用域之外执行的。
  3. 为什么循环中会出现闭包？
  4. 循环中发生闭包是因为循环创建了捕获相同变量引用的函数，如果处理不当，会导致意外行为。
  5. 我们如何解决循环中的闭包问题？
  6. 使用 let 代替 var 在循环中或使用 IIFE （立即调用函数表达式）可以通过为每次迭代创建新范围来修复闭包问题。
  7. 什么是 IIFE？
  8. 一个 IIFE 是一个创建后立即执行的函数，常用于创建新的作用域并避免变量冲突。
  9. 闭包可以用在异步编程中吗？
  10. 是的，闭包在异步编程中对于维护异步操作（如承诺和回调）的状态和上下文至关重要。
  11. 什么是记忆，闭包有什么帮助？
  12. 记忆化是一种缓存昂贵函数调用结果的优化技术。闭包有助于在多个函数调用之间保留对缓存的访问。
  13. 闭包如何帮助事件处理？
  14. 闭包保留事件处理程序所需的变量状态，确保它们在事件触发时正确运行。
  15. JavaScript 中的模块模式是什么？
  16. 模块模式使用闭包创建私有变量和函数，封装功能并避免全局范围污染。
  17. JavaScript 中的闭包可以模拟私有方法吗？
  18. 是的，闭包可以通过保持变量和函数只能在定义它们的函数范围内访问来模拟私有方法。

关于循环中 JavaScript 闭包的最终想法

掌握 JavaScript 中的闭包（尤其是循环内的闭包）对于编写可预测且高效的代码至关重要。通过利用 let, Promises， 和 IIFE，开发人员可以避免常见的陷阱并确保正确的变量范围。这种理解增强了处理异步任务和事件驱动编程的能力，最终导致更强大的应用程序。