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

介绍

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

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

什么是闭包？

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

闭包的真实定义

想象一下，您住在一个有多个房间的房子里，您有一把钥匙可以解锁一个特定的房间 — 我们称之为 “数据室”。键象征着一个闭包。即使大门（创建钥匙的功能）被锁上，您仍然可以访问数据室，因为您保留了钥匙。同样，闭包保留对其原始函数中变量的访问，即使该函数已经完成。

为什么 Closure 对开发人员很重要

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

闭包在 JavaScript 中是如何工作的：示例和模式

基本 Closure 示例

让我们从一个简单的例子开始，它演示了闭包是如何工作的。

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

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

以下是此代码中发生的情况：

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

这个例子可能看起来很简单，但它展示了闭包的一个重要特性：保留状态。

深入探讨：闭包的高级用例

1. 使用 Closures 的数据隐私

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

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

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

2. 带闭包的柯里化函数

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

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

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

在这个例子中，创建一个保留对 的访问权的闭包，使我们能够创建专门的函数，例如 or 通过简单地传递不同的因子。multiplierfactordoubletriple

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

Loop 中的闭包

在 Loop 中使用 Closure 时，可能会让开发人员感到困惑。一个典型的问题涉及闭包捕获循环的变量而不是其当前值。

请考虑以下示例：

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

输出：

3
3
3

由于 在循环的所有迭代中共享，因此 （3） 的最终值将打印 3 次。要解决这个问题，请使用 创建一个块范围的变量，或者在循环中创建一个闭包：iilet

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

现在，输出将符合预期，因为每个函数都有自己的 （here ） 副本。0, 1, 2ij

性能注意事项

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

JavaScript 框架中的实际应用

闭包是 React 等流行框架的基础，其中 HOOK （如 和 ）使用闭包来 “记住” 渲染之间的值和状态。了解闭包可以揭开这些钩子在后台如何工作的神秘面纱，从而更容易编写经过优化、无 bug 的代码。useStateuseEffect

最后的想法：充分利用 Closure

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