理解 JavaScript 中的闭包：从混乱到清晰

想象一下这个...

您正在开发一个项目，并且需要一个函数来“记住”变量的值 - 即使在函数完成运行之后也是如此。闭包就像一个神奇的背包，无论您在代码中走到哪里，它都可以让您携带上一课的知识。它是 JavaScript 中最强大但又被误解的概念之一。但别担心，在本指南结束时，闭包将会从令人头疼变成“啊哈！”

---

什么是闭包？简化的定义和类比

闭包是指即使在外部函数完成执行之后，函数也会“记住”其周围状态（其范围内的变量）。让我们用一个相关的类比来解释一下：

现实生活中的类比：知识的背包

想象你是一名学生。你有一个背包，里面装着笔记、笔和书。您离开教室（您的外部功能），但您仍然可以使用背包中的所有物品（您的封闭装置）。以后每当需要解决问题时，都可以拿出背包里保存的知识。

简化定义

在 JavaScript 中，闭包发生在以下情况：

1. 一个函数在另一个函数中定义。
2. 内部函数“记住”外部函数的变量。

---

闭包如何工作？实际例子

让我们通过代码示例来了解闭包的实际应用。

示例 1：基本闭包

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

这里发生了什么？

• innerFunction 从outerFunction 返回。
• 即使outerFunction已经执行完毕，innerFunction仍然记得outerVariable。

---

示例 2：计数器关闭

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

这里发生了什么？

• 即使 createCounter 已完成运行，返回的函数也会“记住”计数变量。
• 每次调用 counter 时，它都会更新并记住最新的 count 值。

---

示例 3：循环中的闭包（常见陷阱）

在循环内部使用闭包时，常常会让开发人员陷入困境。

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

为什么有效？

• let 关键字创建一个块作用域，因此每次迭代都有自己的 i。
• 如果您使用 var 而不是 let，则所有输出将为 4，因为 var 不会创建块作用域。

？ 文档：MDN 上的关闭

---

闭包的常见用例

闭包不仅仅是一个理论概念——它们非常实用！以下是闭包发挥作用的一些常见场景。

1. 数据缓存

闭包可以存储计算值以供重用，从而节省时间和资源。

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

2. 事件处理程序

闭包经常在事件监听器中使用来维护状态。

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

3. 私有变量

您可以使用闭包来创建私有变量，封装功能。

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

---

为什么闭包很强大

闭包允许您：

• 保留状态：即使在函数执行完毕后也记住变量。
• 封装功能：保持变量的私有性和安全性。
• 简化代码：通过使用闭包进行状态管理来避免全局变量。

---

结论：挑战自己使用闭包

闭包就像 JavaScript 中的瑞士军刀。无论您是缓存数据、处理事件还是创建私有变量，闭包都为您提供了一种管理应用程序状态的强大方法。

你的挑战：尝试在一个小项目中使用闭包，例如构建一个简单的计数器或创建一个缓存机制。你会惊讶于控制闭包给你带来的好处！

---

如果您喜欢这篇文章，请考虑支持我的工作：

• 请我喝杯咖啡
• 预约电话寻求指导或职业建议
• 在 Twitter 上关注我
• 在 LinkedIn 上联系

以上是理解 JavaScript 中的闭包：从混乱到清晰的详细内容。更多信息请关注PHP中文网其他相关文章！