掌握 JavaScript 中的闭包：带有示例的完整指南

介绍

想象一下，你正在构建一个应用程序，深夜，手上拿着咖啡，同时调试一段表现......神秘的 JavaScript 代码。它在另一个函数中调用一个函数，以您意想不到的方式保存值，并且您的 console.log 语句并没有让事情变得更清晰。突然，您意识到这个问题是您只听说过的问题：关闭。

JavaScript 中的闭包通常被表示为一个有点神奇或抽象的概念。但它们实际上是 JavaScript 处理函数和作用域的基本部分，理解它们可以将午夜编码会议变成“啊哈！”时刻而不是令人沮丧的经历。本指南将通过超越基础知识的见解和示例，以一种使闭包变得平易近人、有用甚至令人愉快的方式来分解闭包。

什么是闭包？

闭包是 JavaScript 的一项功能，即使在外部函数完成执行之后，内部函数也可以访问外部（封闭）函数的变量。发生这种情况是因为 JavaScript“关闭”了创建函数的环境（词法作用域），将上下文保留在内存中。结果呢？可以“记住”创建它们的环境的函数，允许数据隐私、记忆等强大功能。

现实世界中闭包的定义

想象一下，您住在一栋有多个房间的房子里，并且您有一把钥匙可以打开一个特定房间 - 我们将其称为“数据室”。钥匙象征着结束。即使主门（创建钥匙的功能）被锁定，您仍然可以访问数据室，因为您保留了钥匙。类似地，闭包保留对其原始函数中变量的访问，即使该函数已经完成。

为什么闭包对开发人员很重要

闭包是创建私有变量和函数模式（例如柯里化和记忆化）的基础。根据 Stack Overflow 的开发者调查，JavaScript 是最流行的编程语言，有近 65% 的专业开发者使用，因此扎实掌握闭包对于有效使用 JavaScript 至关重要。

---

JavaScript 中闭包的工作原理：示例和模式

基本闭包示例

让我们从一个简单的示例开始，演示闭包如何实际工作。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

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

以下是这段代码中发生的事情：

1. createCounter 函数定义了一个局部变量 count。
2. 内部函数（闭包）递增 count 变量并返回它。
3. 即使 createCounter 已完成执行，内部函数仍然可以访问 count - 这是一个正在执行的闭包。

这个例子看似简单，但它展示了闭包的一个重要特性：保存状态。

---

更深入：闭包的高级用例

1. 闭包的数据隐私

闭包最强大的用例之一是创建数据隐私，这是一种使我们能够限制对某些变量或函数的直接访问的技术。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

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

在这里，余额是私有的，只能通过 Deposit 和 getBalance 来访问或修改。这类似于 OOP 中私有字段的工作方式，但在 JavaScript 中，我们使用闭包来实现这一点。

2. 带有闭包的柯里化函数

柯里化是一种函数式编程模式，它利用闭包来允许部分应用函数。

function bankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit(amount) {
      balance += amount;
    },
    getBalance() {
      return balance;
    }
  };
}

const myAccount = bankAccount(1000);
myAccount.deposit(500);
console.log(myAccount.getBalance()); // Output: 1500
console.log(myAccount.balance); // Output: undefined

在此示例中，乘法器创建了一个保留对因子的访问的闭包，使我们能够通过简单地传递不同的因子来创建特殊的函数，例如双倍或三倍。

---

常见陷阱以及如何避免它们

循环中的闭包

在循环中使用闭包可能会让开发人员陷入困境。一个典型的问题涉及闭包捕获循环的变量而不是其当前值。

考虑这个例子：

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // Output: 10

输出：

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

因为 i 在循环的所有迭代中共享，所以 i (3) 的最终值被打印三次。要解决此问题，请使用 let 创建块作用域变量，或在循环内创建闭包：

3
3
3

现在，输出将如预期的那样为 0, 1, 2，因为每个函数都有自己的 i 副本（此处为 j）。

---

性能考虑因素

闭包会消耗内存，因为它们保存来自外部作用域的变量。在高性能应用程序中，当不再需要闭包时，通过清理闭包来注意内存泄漏，特别是在长时间运行的应用程序中。 Chrome DevTools 等工具提供了内存分析工具，可以帮助识别和优化内存使用情况。

---

JavaScript 框架的实际应用

闭包是 React 等流行框架的基础，其中 useState 和 useEffect 等钩子使用闭包来“记住”渲染之间的值和状态。了解闭包可以揭开这些钩子在幕后工作原理的神秘面纱，从而更轻松地编写优化的、无错误的代码。

---

最后的想法：充分利用闭包

掌握闭包可以打开许多高级编程技术的大门。它们对于编写干净、模块化和高效的 JavaScript 代码至关重要。不要回避闭包，而应该将它们作为 JavaScript 工具包中的强大工具。

---

来源

1. Mozilla 开发者网络 (MDN)：关闭
2. JavaScript：大卫·弗拉纳根 (David Flanagan) 的权威指南

理解闭包不仅可以帮助您更快地调试代码，还可以为掌握 JavaScript 基于函数的结构奠定坚实的基础，帮助您顺利过渡到框架、使用 Node.js 进行后端编程等。无论您是构建可扩展的应用程序还是创建高度交互的前端，闭包都是一项值得掌握的技能。

以上是掌握 JavaScript 中的闭包：带有示例的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！