引言：为什么闭包如此重要？
在JavaScript面试中，闭包几乎是必考题。它不仅是JS语言的核心特性，更是理解高阶函数、模块化设计的基础。今天我们就通过阮一峰老师的经典闭包示例，从零开始揭开闭包的神秘面纱。
一、作用域：闭包的基石
要理解闭包，首先需要掌握作用域的概念。来看这个基础示例：
// 全局作用域
var n = 10;
function fn() {
// 函数作用域
b = 44;
{
// 块级作用域
var n = 20;
}
console.log(n); // 20
}
fn();
console.log(n); // 10（全局变量不受函数内var声明影响）
console.log(b); // 44（未声明直接赋值成为全局变量）
作用域链的特性：
- 内部作用域可以访问外部作用域的变量
- 外部作用域无法访问内部作用域的变量
- 当多个作用域存在同名变量时，采用"就近原则"
二、闭包是什么？直观理解
闭包就像一座连接函数内部和外部的桥梁。来看这个经典示例：
// 让局部变量可以在全局访问
function fn1() {
// 局部变量
var n = 10;
function fn2() {
console.log(n); // 访问外部函数变量
}
return fn2; // 返回内部函数
}
const result = fn1();
result(); // 10（外部成功访问函数内的局部变量）
闭包的定义：
当一个函数（fn2）在其词法作用域之外被调用，仍然能够访问其外部函数（fn1）的变量，这种函数及其词法环境的组合就称为闭包。简单说， 闭包 = 函数 + 函数所处的环境 。
三、闭包的两大核心用途
1. 读取函数内部的私有变量
这是闭包最基础的应用。在JS中，函数内部的变量默认对外不可见，通过闭包可以安全地暴露这些变量：
function createCounter() {
let count = 0; // 私有变量
return {
getCount: () => count, // 读取私有变量
increment: () => count++
};
}
const counter = createCounter();
console.log(counter.getCount()); // 0（成功读取内部变量）
2. 让变量的值始终保存在内存中
闭包会阻止垃圾回收机制回收外部函数的变量。看这个进阶示例：
function f1() {
var n = 111;
nAdd = function () { n += 1 } // 可以修改外部函数变量
function f2() {
console.log(n);
}
return f2;
}
const result = f1();
result(); // 111
nAdd(); // 修改外部函数变量
result(); // 112（变量值被保存在内存中）
为什么变量不会被销毁？
JS的垃圾回收机制采用"引用计数"策略：当一个变量的引用次数为0时，会被回收。由于闭包函数（f2）始终引用着外部函数（f1）的变量（n），导致n的引用计数始终大于0，因此不会被回收。
四、闭包的实际应用场景
1. 模块化开发
闭包可以创建私有作用域，避免全局变量污染：
const module = (function() {
const privateVar = 'I am private';
return {
publicMethod: () => privateVar
};
})();
console.log(module.publicMethod()); // 访问私有变量
console.log(module.privateVar); // undefined（真正的私有）
2. 防抖节流函数
闭包常用于实现防抖节流，保存定时器ID等状态：
function debounce(fn, delay) {
let timer = null; // 闭包保存定时器状态
return function() {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
3. React Hooks实现原理
React的 useState、useEffect 等Hooks正是基于闭包实现状态持久化：
function useState(initialValue) {
let _value = initialValue;
function setState(newValue) {
_value = newValue;
render(); // 触发重新渲染
}
function getState() { return _value; }
return [getState, setState];
}
五、闭包的注意事项与内存管理
1. 可能导致内存泄漏
由于闭包会保留变量在内存中，如果滥用可能导致内存占用过高。解决方案是：
function createHeavyObject() {
const largeData = new Array(1000000).fill(1);
return function() {
console.log(largeData.length);
};
}
// 使用完毕后手动解除引用
let closure = createHeavyObject();
closure();
closure = null; // 释放引用，允许垃圾回收
2. 自由变量的不确定性
闭包可以在外部修改内部变量，可能导致不可预测的行为：
function createCounter() {
let count = 0;
return {
get: () => count,
increment: () => count++
};
}
const counter = createCounter();
counter.increment();
// 其他地方可能意外修改count的值
六、闭包面试题解析
经典面试题：以下代码输出什么？
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
// 输出：3 3 3（而不是期望的0 1 2）
问题分析 ：setTimeout 回调是闭包，共享同一个i变量。当定时器执行时，循环已结束，i的值为3。
解决方案 ：使用IIFE创建独立作用域
for (var i = 0; i < 3; i++) {
(function(j) {
setTimeout(function() {
console.log(j);
}, 1000);
})(i);
}
// 输出：0 1 2
或者使用ES6的let声明（块级作用域）：
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
总结：闭包的本质与价值
闭包就像一个"背包"，当内部函数被返回时，它会把外部函数的变量和环境一起"打包带走"。这个特性让JS拥有了强大的状态管理能力，但也带来了内存管理的挑战。
闭包的核心价值 ：
- 实现数据私有化
- 维持状态持久化
- 模块化代码设计
掌握闭包不仅能应对面试，更能写出更优雅、更安全的JavaScript代码。希望本文能帮助你真正理解闭包，而不只是记住概念！
