JS闭包是什么？一文讲明白

**JS闭包是什么？通俗讲解** 本文深入浅出地介绍了JavaScript闭包的概念，它是一种函数能够记住并访问其创建时词法作用域的特性，即使外部函数已执行完毕。文章剖析了闭包的工作原理，包括内部函数如何捕获父级词法环境的引用，从而实现对外部变量的持久访问。同时，探讨了闭包的常见应用场景，如私有变量封装、函数工厂、事件回调、模块模式以及防抖节流。然而，文章也指出了闭包可能带来的潜在问题，包括内存泄漏、性能开销和this指向混乱，并提供了相应的避免方法，如及时解除引用、减少不必要的闭包创建，以及使用箭头函数或变量保存this来正确绑定上下文。理解并合理运用闭包，能够显著提升代码的模块化与健壮性，同时需警惕其副作用，确保代码的性能与内存安全。

闭包是函数能够记住并访问其创建时的词法作用域，即使外部函数已执行完毕；2. 它通过内部函数捕获父级词法环境的引用实现，使外部变量不被垃圾回收；3. 常见应用包括私有变量封装、函数工厂、事件回调、模块模式及防抖节流；4. 潜在问题有内存泄漏、性能开销和this指向混乱；5. 避免方法包括及时解除引用、减少不必要的闭包创建，以及使用箭头函数或变量保存this来正确绑定上下文。闭包是JavaScript核心特性，合理使用可提升代码模块化与健壮性，同时需注意其副作用并采取措施规避，以确保性能与内存安全。

在JavaScript里，闭包简单来说，就是一个函数能够“记住”并访问它被创建时所处的词法作用域，即使那个外部函数已经执行完毕，它的作用域本该被销毁了。它就像是一个记忆力超群的函数，把外部世界的一部分“装”进了自己的口袋，随时可以拿出来用。

解决方案

对我而言，理解闭包的关键在于抓住“词法作用域”这个概念。当你在一个函数内部定义另一个函数时，这个内部函数就天然地形成了一个闭包。它不仅仅是代码本身，它还“捆绑”着其父级作用域（以及父级的父级，直到全局作用域）中的所有变量。这意味着，即便外部函数执行完毕，其内部的局部变量按理说应该被垃圾回收机制清理掉，但如果这个内部函数（闭包）还在某个地方被引用着，那么它所引用的外部变量就不会被释放，它们会一直“活着”。

举个例子，你可能写过这样的代码：

function createCounter() {
    let count = 0; // 这是一个局部变量

    return function() { // 这个匿名函数就是一个闭包
        count++;
        console.log(count);
    };
}

const counter1 = createCounter();
counter1(); // 输出 1
counter1(); // 输出 2

const counter2 = createCounter(); // 创建一个新的计数器实例
counter2(); // 输出 1

在这里，createCounter 函数执行完后，count 变量本应消失。但因为它的内部函数被 counter1 和 counter2 变量引用着，所以每个 counter 实例都“记住”了自己的 count 变量，互不干扰。这真是太奇妙了，它允许我们创建带有私有状态的函数。

闭包在JavaScript中是如何工作的？

闭包的运作机制，深入一点看，其实是JavaScript引擎在幕后默默做的功课。每次函数被调用时，都会创建一个新的执行上下文（Execution Context）。这个上下文包含一个变量环境（Variable Environment）和一个词法环境（Lexical Environment）。词法环境有点像一个链表，它不仅包含了当前作用域的变量，还包含了一个指向外部词法环境的引用。当内部函数被定义时，它会捕获其父级（以及所有祖先）词法环境的引用。

所以，当 createCounter 函数被调用时，它会创建一个包含 count 变量的词法环境。当它返回那个匿名函数时，这个匿名函数就“带走”了对那个词法环境的引用。即使 createCounter 已经从调用栈中弹出，它的词法环境并不会立即被销毁，因为那个匿名函数（闭包）还在引用它。每当你调用 counter1()，它都会通过这个被捕获的词法环境找到并修改那个唯一的 count 变量。这并非复制了一份变量，而是直接引用了原始的变量。这也就是为什么 counter1 和 counter2 各自维护着独立的 count 值，因为它们各自的匿名函数捕获的是 createCounter 两次不同调用时产生的不同词法环境。

什么时候应该使用闭包？闭包的常见应用场景有哪些？

闭包的实用性远超我们的想象，它几乎无处不在，只是我们可能没有意识到。对我来说，它最吸引人的地方在于它能模拟一些传统面向对象语言的“私有”特性，以及在函数式编程中扮演的重要角色。

• 数据封装和私有变量： 这是闭包最经典的应用。就像上面 createCounter 的例子，count 变量对于外部是不可见的，只能通过返回的闭包来访问和修改，从而实现了数据的封装。这在构建模块化代码时非常有用，可以防止全局污染和意外修改。
• 函数工厂和高阶函数： 闭包可以用来创建“定制化”的函数。例如，一个 makeAdder(x) 函数，返回一个 add(y) 函数，每次调用 add 都能将 y 与之前 x 相加。这让我们可以根据不同的参数生成一系列具有特定行为的函数。
• 事件处理和回调函数： 在异步编程中，闭包尤其重要。比如在循环中给多个DOM元素添加事件监听器时，如果直接使用 var 声明的循环变量，会遇到变量共享的问题。但如果使用闭包（或 let），每个事件处理函数都能“记住”它自己对应的循环变量值。
• 模块模式（早期JS模块化）： 在ES6模块出现之前，闭包是实现模块化的一种流行方式。通过立即执行函数表达式（IIFE）结合闭包，可以创建私有变量和方法，只暴露公共接口，避免命名冲突。
• 节流（throttle）和防抖（debounce）： 这些优化技术也大量依赖闭包来存储计时器ID和上次执行的时间戳，以控制函数执行的频率。

闭包会带来哪些潜在问题？如何避免？

虽然闭包强大，但它也不是没有“脾气”的。在使用不当的时候，它也可能带来一些让人头疼的问题，最常见的就是内存管理和性能开销。

• 内存泄漏： 这是闭包最常被诟病的问题。因为闭包会保持对外部作用域的引用，如果这个闭包长时间不被释放（例如，它被挂载到DOM元素上，或者被全局变量引用），那么它所引用的外部变量也永远不会被垃圾回收。尤其是在老旧的IE浏览器中，DOM节点和JavaScript对象之间的循环引用很容易导致内存泄漏。
  • 如何避免： 关键在于及时解除引用。如果闭包不再需要，确保其引用被设置为 null。例如，在移除DOM元素时，也要记得解除其事件监听器。对于长期存在的对象，定期检查其引用链。
• 性能开销： 每次创建闭包，都会伴随着额外的内存开销，因为它需要存储其词法环境。如果大量创建不必要的闭包，尤其是在循环中，可能会对性能产生影响。
  • 如何避免： 评估是否真的需要闭包。有些场景下，简单的参数传递或者其他模式可能更有效率。在循环中创建闭包时，要特别小心，确保每个闭包都是必要的。
• this 指向问题： 闭包内部的 this 关键字的行为常常让人困惑。this 的值是在函数被调用时确定的，而不是在函数定义时。在闭包中，this 通常指向全局对象（非严格模式下）或 undefined（严格模式下），而不是你期望的外部函数的 this。
  • 如何避免： 最常见的解决方案是使用箭头函数，因为箭头函数没有自己的 this，它会捕获其父作用域的 this。或者，在旧代码中，你可能会看到将 this 赋值给一个变量（如 const self = this;）然后在闭包中使用 self 的做法。bind(), call(), apply() 也能用来显式地绑定 this。

总的来说，闭包是JavaScript中一个非常强大且核心的特性，理解它能帮助你写出更健壮、更模块化的代码。但就像任何强大的工具一样，掌握它的“副作用”并学会规避，同样重要。

以上就是《JS闭包是什么？一文讲明白》的详细内容，更多关于的资料请关注golang学习网公众号！