导读
闭包（Closure）是 JavaScript 中一个非常重要但又常被初学者感到困惑的概念。掌握闭包不仅有助于编写更优雅的代码，还能让你更好地理解 JavaScript 语言的特性。本文将深入探讨闭包的定义、原理以及它的常见应用场景。
什么是闭包？
闭包是指在一个函数内部定义的函数可以访问外部函数的作用域（包括变量、常量、参数等），即使外部函数已经执行结束，这个内部函数仍然可以访问到外部函数的变量。
换句话说，闭包使得内部函数“记住”了它诞生时的环境，即外部函数的作用域。
闭包的形成条件
要形成闭包，通常需要两个条件：
函数嵌套：一个函数内部定义了另一个函数。
访问外部变量：内部函数访问了外部函数的变量。
让我们通过一个简单的例子来理解闭包：
function outerFunction() {
let outerVar = 'I am outside!';
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
const closure = outerFunction();
closure(); // 输出: I am outside!
在这个例子中，outerFunction 返回了 innerFunction，并且 closure 是对 innerFunction 的引用。当 closure 被调用时，它仍然能够访问 outerVar，尽管 outerFunction 已经执行完毕。这就是闭包的魔力。
闭包的原理
要理解闭包的工作原理，需要深入了解 JavaScript 的作用域链和垃圾回收机制。
作用域链
当一个函数被创建时，它的作用域链包含了它自身的作用域以及所有父级作用域的引用。当内部函数被调用时，JavaScript 引擎会从当前函数的作用域开始查找变量，如果找不到，再向上查找父级作用域，直到找到变量或到达全局作用域。
垃圾回收
通常，当一个函数执行完毕后，其作用域内的所有变量都会被销毁，以释放内存。JavaScript 的垃圾回收通常基于 标记-清除（mark-and-sweep） 算法。这种算法的工作原理如下：
标记阶段：从根（如全局对象）开始，垃圾回收器标记所有能通过引用访问到的对象。
清除阶段：未被标记的对象会被认为不再需要，并被回收，从而释放内存。
闭包对垃圾回收的影响
JavaScript 中闭包中的垃圾回收情况有所不同，因为内部函数仍然持有对外部函数变量的引用，所以这些变量不会被销毁，而是保留在内存中，直到闭包不再被引用。
引用保留
闭包会保留对外部作用域中变量的引用，因此只要闭包本身仍然存在，这些变量就不会被垃圾回收。即使这些变量在闭包中不再需要，它们仍然占据内存。
闭包的生命周期
如果闭包被长期持有，例如在事件处理器或异步操作中，闭包引用的外部变量也会长期占据内存。这可能导致内存泄漏，特别是在闭包中引用了大量或复杂的数据结构时。
什么时候垃圾回收可以释放闭包占用的内存？
垃圾回收器可以回收闭包占用的内存，条件是：没有对闭包的引用 和 内部变量未被其他引用持有。
后文将介绍如何销毁闭包占用的资源，此处我们仅需了解闭包对 JavaScript 中垃圾回收的影响，以及闭包是如何可以持续访问外部函数的变量的。
闭包的常见应用
闭包在实际开发中有很多应用场景，包括但不限于以下几个：
数据隐藏和封装
闭包可以用来模拟私有变量，从而实现数据隐藏和封装。例如：
function Counter() {
let count = 0;
return {
increment: function() {
count++;
console.log(count);
},
decrement: function() {
count--;
console.log(count);
}
};
}
const myCounter = Counter();
myCounter.increment(); // 输出: 1
myCounter.increment(); // 输出: 2
myCounter.decrement(); // 输出: 1
在这个例子中，count 变量被封装在 Counter 函数的作用域内，无法从外部直接访问，只能通过 increment 和 decrement 方法操作。
我们再进一步调整一下代码，如下：
const MyModule = (function () {
let privateVar = 'I am private';
function privateMethod() {
console.log(privateVar);
}
return {
publicMethod: function () {
privateMethod();
}
};
})();
MyModule.publicMethod(); // 'I am private'
这就是 JavaScript 最常见的 Module 设计模式的实现。用于创建封装的、私有的作用域，同时公开一些公有的方法或变量。
而 Module 模式的私有变量和方法就是通过闭包的机制实现的。模块内部的变量和函数默认是私有的，无法从外部直接访问。这提供了很好的信息隐藏（Information Hiding），使模块内部的实现细节对外部透明。
闭包除了可以用来模拟私有变量，从而实现数据隐藏和封装。另外一个衍生出来的特性就是减少全局变量污染。
例如示例代码中的 Module 模式通过将代码封装在一个函数中并立即执行，可以有效减少全局作用域中的变量数量。这对于浏览器环境特别重要，因为它可以避免不同脚本之间的命名冲突。
最后就是通过使用闭包，可以提升代码的组织性和可维护性。准确的说应该是通过 Module 模式，可以将相关的功能组织到同一个模块中，使代码更易于理解和维护。模块化的代码通常更加清晰，并且更易于分工协作。
创建工厂函数
闭包可以用来创建工厂函数，生成带有特定数据或行为的函数实例：
function createGreeting(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const sayHello = createGreeting('Hello');
const sayHi = createGreeting('Hi');
sayHello('Alice'); // 输出: Hello, Alice!
sayHi('Bob'); // 输出: Hi, Bob!
工厂函数可以根据传入的参数返回不同类型的对象，甚至可以在运行时动态决定返回什么类型的对象。这使得工厂函数非常灵活。
与构造函数（Constructor Function）不同，工厂函数不需要使用 new 关键字。工厂函数的灵活性和易用性使其在许多场景下成为一个非常有用的设计模式。
当然，工厂函数也是通过闭包实现私有数据，确保对象的某些属性或方法对外部不可见。私有变量不会暴露给外部代码，从而增加了数据的安全性。
（说明： 由于本文不是主要介绍设计模式的文章 ，如果有同学对工厂模式感兴趣，可以查阅工厂模式的相关文章了解详情。）
函数柯里化
谈闭包相关的话题，函数柯里化是无法避开的话题。
柯里化（Currying）简介
柯里化（Currying） 是函数式编程中的一个重要概念，在 JavaScript 中也广泛应用。柯里化的基本思想是将一个接受多个参数的函数，转换为一系列接受单个参数的函数。每个函数返回下一个函数，直到所有参数都被提供完为止，最终返回结果。
简单说柯里化是将多参数函数转换为一系列单参数函数的技术。在 JavaScript 中利用闭包可以轻松实现：
function curry(fn) {
return function(a) {
return function(b) {
return fn(a, b);
};
};
}
const add = (x, y) => x + y;
const curriedAdd = curry(add);
console.log(curriedAdd(2)(3)); // 输出: 5
为什么使用柯里化？
柯里化有很多应用场景和优势：
参数复用： 柯里化允许我们创建一个预加载部分参数的新函数，这在处理一些具有相似逻辑的操作时非常有用。
function multiply(a) { return function(b) { return a * b; }; } const double = multiply(2); console.log(double(5)); // 10 const triple = multiply(3); console.log(triple(5)); // 15代码可读性和可维护性： 柯里化能够使代码更具表现力和模块化，特别是在需要重复应用某些操作时。
const greet = greeting => name => `${greeting}, ${name}!`; const sayHello = greet('Hello'); const sayHi = greet('Hi'); console.log(sayHello('Alice')); // "Hello, Alice!" console.log(sayHi('Bob')); // "Hi, Bob!"延迟执行： 柯里化的函数可以在稍后调用时完成操作，这在需要等待某些条件满足后执行的场景中非常有用。
function fetchData(apiUrl) { return function(endpoint) { return fetch(`${apiUrl}/${endpoint}`).then(response => response.json()); }; } const api = fetchData('https://api.example.com'); api('users').then(data => console.log(data)); // 获取用户数据 api('posts').then(data => console.log(data)); // 获取帖子数据
使用柯里化的适用场景
柯里化的适用场景有很多，本文主要介绍一下事件处理和函数组合两个实际使用场景。
事件处理
在浏览器环境中，柯里化函数可以用于简化事件处理。
function handleEvent(selector) {
return function(type) {
return function(callback) {
document.querySelector(selector).addEventListener(eventType, callback);
};
};
}
const $curry = handleEvent('#myButton');
$curry('click')(function() {
alert('Button clicked!');
});
是不是有种对象链式调用的感觉，或者有点 jQuery 的感觉了？
函数组合
柯里化可以结合函数组合（Function Composition）使用，使得我们可以更简洁地编写复杂的操作。
const compose = (f, g) => x => f(g(x));
const toUpperCase = x => x.toUpperCase();
const exclaim = x => `${x}!`;
const shout = compose(exclaim, toUpperCase);
console.log(shout('hello')); // "HELLO!"
无论是数据隐藏和封装，还是创建工厂函数，乃至函数柯里化的种种特性，在 JavaScript 中都是通过闭包来实现的。是不是瞬间感觉闭包是神兵利器了？
闭包的注意事项
尽管闭包非常强大，但在使用时也要注意以下几点：
内存消耗
闭包会持有对外部作用域中变量的引用，即使外部函数执行完毕，这些引用也不会立即被垃圾回收。如果闭包中引用了大量数据或长生命周期的对象，可能会导致内存泄漏，增加应用程序的内存消耗。因此，要小心管理闭包的生命周期，避免不必要的内存消耗。
常见的一种使用闭包可能会出现内存消耗问题的场景就是通过构造函数创建对象时，在了构造函数下，将对象的所有方法和属性都包装到在了构造函数以内：
function Person(name, age){
this.name = name;
this.age = age;
this.sayHello() = function(){
console.log('Hi I am ' + this.name)
}
this.getAge = function(){
return this.age;
}
}
const robert = new Person('Robert Yao', 18);
这样就会导致每次实例化 Person 对象的时候，每个方法和属性都会被重新赋值。每个实例都会复制一份，占用更多的资源。如果不是确实需要为每个实例都拷贝一份，应当将公共的方法或者属性放到 Person 对象的原型链方法中。
function Person(name, age){
this.name = name;
this.age = age;
return this
}
Person.prototype.sayHello() = function(){
console.log('Hi I am ' + this.name)
return this
}
Person.prototype.getAge = function(){
return this.age;
}
const selina = new Person('Selina', 18);
这样每个实例都会共用原型链中的方法，从而减少内存资源的消耗。
另外，如果闭包被绑定在事件监听器或异步回调中，在适当的时候记得移除这些监听器或取消回调，以确保不再需要的闭包能被垃圾回收，避免导致内存泄漏。
调试复杂度
由于闭包可以持有对外部变量的引用，这些变量的生命周期可能比预期的要长。因此，追踪和调试这些变量的状态变化可能会变得复杂，特别是在处理异步操作或多层嵌套的闭包时。很难清楚了解哪些变量是从哪个作用域中捕获的。
意外的变量共享
闭包可以导致意外的变量共享问题。例如，在一个循环中创建的闭包可能会共享同一个外部变量，从而导致意料之外的行为。
function createCounters() {
var counters = [];
for (var i = 0; i < 3; i++) {
counters[i] = function() {
return i;
};
}
return counters;
}
var counters = createCounters();
console.log(counters[0]()); // 3
console.log(counters[1]()); // 3
console.log(counters[2]()); // 3
在这个例子中，所有的闭包都共享了 i 变量的最终值 3，而不是各自持有不同的值。
如何销毁闭包占用的资源？
前文介绍闭包的内存消耗的章节中时介绍过，由于闭包可以持有对外部变量的引用，因此在某些情况下可能会导致内存泄漏，特别是在长期运行的应用程序中。因此，了解如何正确销毁闭包占用的资源非常重要。
手动解除对闭包变量的引用
如果一个闭包中的变量不再需要，可以通过手动将这些变量设置为 null 或 undefined 来解除引用。这会通知 JavaScript 的垃圾回收机制，这些变量可以被回收。
function createClosure() {
let largeData = new Array(1000000).fill('some data');
return function() {
console.log('Closure is still active');
};
}
const closure = createClosure();
// 使用闭包
// 当不再需要 largeData 时，手动解除引用
closure.largeData = null;
将闭包设为 null 或 undefined
如果整个闭包不再需要，可以通过将包含闭包的函数或变量设置为 null 或 undefined 来清除闭包的引用，这样垃圾回收器可以回收闭包所占用的内存。
function createClosure() {
let largeData = new Array(1000000).fill('some data');
return function() {
console.log('Closure is still active');
};
}
let closure = createClosure();
// 使用闭包
// 当不再需要闭包时
closure = null;
合理管理闭包生命周期，减少闭包的生命周期
尽可能缩短闭包的生命周期，即在闭包的作用域内只保持必要的变量引用，避免长期持有对外部变量的引用。
function createClosure() {
let largeData = new Array(1000000).fill('some data');
function internalFunction() {
console.log('Doing something with largeData');
}
internalFunction();
return function() {
console.log('Closure does not use largeData anymore');
};
}
const closure = createClosure();
// 此时 largeData 已不再被引用，可以被垃圾回收
利用现代 JavaScript 特性 使用 WeakMap 或 WeakSet
使用现代 JavaScript 的特性和工具，例如 WeakMap 或 WeakSet，来管理闭包中引用的对象。新特性的数据结构允许对象被垃圾回收，即使它们仍然在 WeakMap 或 WeakSet 中存在。可以更好地管理内存。这些弱引用结构允许垃圾回收器在没有其他强引用时回收对象，从而防止内存泄漏。
function createClosure() {
const cache = new WeakMap();
return function(obj) {
if (!cache.has(obj)) {
cache.set(obj, new Array(1000000).fill('some data'));
}
console.log(cache.get(obj));
};
}
const closure = createClosure();
const obj = {};
closure(obj); // 使用 obj 作为 key 存储数据
// 当 obj 不再被引用时，cache 内的对应数据会被回收
移除事件监听器或回调函数
如果闭包被绑定在事件监听器或异步回调中，在适当的时候记得移除这些监听器或取消回调，以确保不再需要的闭包能被垃圾回收。
function setupEvent() {
const element = document.getElementById('myElement');
function handleClick() {
console.log('Element clicked');
}
element.addEventListener('click', handleClick);
// 当不再需要时，移除事件监听器
return function cleanup() {
element.removeEventListener('click', handleClick);
};
}
const cleanup = setupEvent();
// 当不再需要事件处理时，调用 cleanup
cleanup();
通过以上这些措施，可以有效管理闭包的资源使用，避免潜在的内存泄漏问题。
如何解决闭包复杂度的问题？
上个章节介绍了如何解决闭包资源消耗的问题，现在让我们一起来看看解决解决闭包复杂度的方法：
使用 let 代替 var
在循环中创建闭包时，使用 let 关键字代替 var，以确保每个闭包都能捕获当前迭代中的变量值，而不是共享同一个值。
function createCounters() {
var counters = [];
for (let i = 0; i < 3; i++) {
counters[i] = function() {
return i;
};
}
return counters;
}
var counters = createCounters();
console.log(counters[0]()); // 0
console.log(counters[1]()); // 1
console.log(counters[2]()); // 2
简化闭包结构
尽量简化闭包的嵌套层级，减少闭包中的依赖项，保持闭包的逻辑清晰易懂。如果可能，将复杂的逻辑分解为多个简单的函数，而不是在闭包中处理所有逻辑。
function createClosure() {
let counter = 0;
function increment() {
return counter++;
}
function decrement() {
return counter--;
}
return { increment, decrement };
}
const closure = createClosure();
console.log(closure.increment()); // 0
console.log(closure.decrement()); // -1
避免长期持有不必要的（变量）引用
在不需要的情况下，不要让闭包长时间持有对外部变量的引用，尤其是大型数据结构或 DOM 元素。适时释放资源可以帮助降低内存占用。这个介绍如何减少闭包的资源消耗的处理方式一致。
总结
闭包是 JavaScript 中一个强大且灵活的概念，通过理解闭包，你可以更好地掌握作用域、函数式编程等高级特性。无论是在数据封装、工厂函数、还是柯里化中，闭包都能为我们提供优雅的解决方案。
不过，在使用闭包时也要注意其潜在的内存问题，并合理设计代码结构，以便更好地管理闭包带来的复杂性。
