一、闭包的定义
在 JavaScript 中，闭包是指函数能够访问并记住其词法作用域（也就是定义时的作用域），即使这个函数是在其词法作用域之外被执行。简单来说，闭包是由函数以及创建该函数的词法环境组合而成。
例如：
function outerFunction() { let outerVariable = 'I am from the outer function'; function innerFunction() { console.log(outerVariable); } return innerFunction; } let closureExample = outerFunction(); closureExample(); // 输出：I am from the outer function
在这个例子中，innerFunction就是一个闭包。它能够访问outerFunction中的变量outerVariable，即使outerFunction已经执行完毕，closureExample在外部环境调用innerFunction时，依然可以访问到outerVariable。
二、闭包的形成原理
- 作用域链（Scope Chain）
- JavaScript 中的每个函数在创建时，都会有一个与之关联的作用域链。作用域链是一个对象列表，用于解析变量名。当在函数内部访问一个变量时，JavaScript 引擎会首先在函数内部的本地作用域中查找。如果找不到，就会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。
- 在闭包的情况下，内部函数（如上述例子中的
innerFunction）的作用域链会包含外部函数（outerFunction）的作用域。这就是为什么内部函数可以访问外部函数中的变量。
- 词法作用域（Lexical Scoping）
- JavaScript 使用词法作用域，这意味着函数的作用域是在函数定义时确定的，而不是在函数调用时。例如：
let globalVariable = 'I am global'; function anotherOuterFunction() { let outerVariable = 'I am from another outer function'; function anotherInnerFunction() { console.log(globalVariable); console.log(outerVariable); } return anotherInnerFunction; } let anotherClosureExample = anotherOuterFunction(); anotherClosureExample(); // 输出： // I am global // I am from another outer function
- 这里的
anotherInnerFunction的词法作用域是在anotherOuterFunction内部定义时确定的，它能够访问globalVariable（全局作用域）和outerVariable（anotherOuterFunction的作用域）。
三、闭包的常见应用场景
（一）数据隐藏和封装
- 模块模式（Module Pattern）
- 闭包可以用于创建私有变量和方法，实现数据隐藏和封装，这在 JavaScript 的模块系统出现之前是一种常用的模式。例如：
let myModule = (function () { let privateVariable = 'This is a private variable'; function privateMethod() { console.log('This is a private method'); } return { publicMethod: function () { console.log(privateVariable); privateMethod(); } }; })(); myModule.publicMethod(); // 输出： // This is a private variable // This is a private method
- 在这个模块模式的例子中，
privateVariable和privateMethod是私有的，只能通过返回对象中的publicMethod来间接访问和调用。闭包在这里起到了隐藏内部实现细节的作用。
（二）回调函数和异步操作
- 定时器（setTimeout/setInterval）
- 在 JavaScript 中，定时器是异步操作的一种常见形式。闭包可以帮助我们在定时器回调函数中访问外部作用域中的变量。例如：
function countDown(seconds) { let timer = seconds; let intervalId = setInterval(function () { console.log(timer); if (timer === 0) { clearInterval(intervalId); } timer--; }, 1000); } countDown(5); // 输出： // 5 // 4 // 3 // 2 // 1 // 0
- 这里的定时器回调函数形成了一个闭包，它能够访问
countDown函数中的timer变量，从而实现了倒计时的功能。
- 事件处理
- 在事件处理中，闭包也非常有用。例如，当我们为多个 DOM 元素添加事件监听器，并且希望在事件处理函数中访问特定的索引或数据时。
let buttons = document.querySelectorAll('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function () { console.log('Button index:', i); }); }
- 这里的事件处理函数形成了闭包，它们能够访问
i变量。当按钮被点击时，会输出相应的索引。
四、闭包可能带来的问题
- 内存泄漏（Memory Leak）
- 如果一个闭包长期持有对外部对象的引用，并且这些对象不再需要，但由于闭包的存在而无法被垃圾回收，就会导致内存泄漏。例如：
function createClosure() { let largeObject = new Array(1000).fill('data'); return function () { console.log(largeObject.length); }; } let closure = createClosure(); // 即使我们不再需要largeObject，但由于closure函数引用了它， // 在某些情况下它可能无法被垃圾回收，导致内存占用
- 在这个例子中，如果
closure函数在很长时间内都存在，并且没有释放对largeObject的引用，就可能导致内存泄漏。不过，在现代 JavaScript 引擎中，这种情况通常会被很好地处理，但在一些旧的浏览器或特定的复杂场景下，还是需要注意。
- 变量共享问题
- 当多个闭包共享外部作用域中的变量时，可能会出现意外的结果。例如：
function createClosures() { let counter = 0; return [ function () { console.log(counter++); }, function () { console.log(counter++); } ]; } let [closure1, closure2] = createClosures(); closure1(); // 输出：0 closure2(); // 输出：1
- 这里两个闭包共享了
counter变量，它们的操作会相互影响。如果不注意这种情况，可能会导致代码逻辑的混乱。
