引言
前端面试中，无论是面试初级、中级、或者是级高级，闭包（closure）是个永远绕不过的话题，下面我们一起来探讨下闭包
闭包（Closure）是JavaScript中最强大、最常用但也最容易被误解的概念之一。它是JavaScript函数式编程的核心，也是许多 高级特性 和 设计模式 的基础。理解闭包不仅能帮助你编写更优雅、更高效的代码，还能让你深入理解JavaScript的执行机制。
闭包不是JavaScript刻意"设计"的特性，而是函数作为一等公民、词法作用域、函数可以嵌套这些语言特性自然产生的结果。它成为了JavaScript最强大和最常用的特性之一。
一、闭包的定义与基本概念
什么是闭包？
在JavaScript中，闭包是指有权访问另一个函数作用域中变量的函数。简单来说，闭包就是一个函数，它能够记住并访问其定义时所在的词法作用域，即使该函数在其词法作用域之外被执行。
让我们通过一个简单的例子来理解闭包：
javascript
function outer() {
let message = 'Hello, Closure!'; // outer函数的局部变量
function inner() { // inner函数定义在outer函数内部
console.log(message); // inner函数访问了outer函数的局部变量
}
return inner; // outer函数返回inner函数
}
const closure = outer(); // 调用outer函数，返回inner函数并赋值给closure
closure(); // 执行closure，输出：Hello, Closure!在这个例子中：
inner函数定义在outer函数内部，能够访问outer函数的局部变量messageouter函数返回了inner函数，使其在outer函数执行完毕后仍然可以被调用- 当调用
closure()时，虽然outer函数的执行上下文已经被销毁，但inner函数仍然能够访问到message变量
这就是闭包的基本特性：函数能够记住并访问其定义时所在的作用域，即使函数在作用域外部执行。
闭包的构成条件
要形成闭包，必须满足以下三个条件：
- 嵌套函数结构：存在函数嵌套，即一个函数定义在另一个函数内部
- 内部函数访问外部函数的变量：内部函数引用了外部函数的变量或参数
- 外部函数返回内部函数：外部函数将内部函数作为返回值，使得内部函数可以在外部函数作用域之外执行
二、闭包的工作原理
要深入理解闭包的工作原理，我们需要先了解JavaScript的词法作用域 和执行上下文 。纤细的解说可以参看我之前的2篇文章： 你真的搞懂了javascript 中的作用域、作用域链了吗？ 你真的搞懂了javascript 中的执行上下文了吗？
1. 词法作用域
词法作用域（Lexical Scope）是指函数的作用域由其在代码中定义的位置决定，而不是由函数被调用的位置决定。JavaScript采用词法作用域，这是闭包能够工作的基础。
javascript
const globalVar = 'global';
function outer() {
const outerVar = 'outer';
function inner() {
const innerVar = 'inner';
console.log(globalVar); // 可以访问全局变量
console.log(outerVar); // 可以访问外部函数变量
console.log(innerVar); // 可以访问自己的变量
}
return inner;
}
const closure = outer();
closure();在词法作用域中，变量的查找顺序是：当前函数作用域 → 外部函数作用域 → 全局作用域。
2. 执行上下文与作用域链
当函数执行时，JavaScript引擎会创建一个执行上下文（Execution Context），它包含了函数的执行环境，如变量、参数、this指向等。
每个执行上下文都有一个作用域链（Scope Chain），它是一个指向所有可访问作用域的链表。作用域链的前端是当前函数的作用域，然后是包含它的外部函数的作用域，依此类推，直到全局作用域。
3. 闭包的内存结构
当外部函数执行完毕后，其执行上下文会被销毁，但由于内部函数仍然引用着外部函数的变量，这些变量不会被垃圾回收机制回收。这就是闭包能够记住其定义时所在作用域的原因。
下面是闭包的内存结构示意图：
三、闭包的代码示例
1. 基本闭包示例
javascript
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3在这个例子中，createCounter函数返回一个闭包，该闭包能够记住并修改count变量。每次调用counter()时，count都会递增并返回新值。
2. 闭包实现数据私有
闭包可以用来创建私有变量和方法，实现数据封装：
javascript
function createPerson(name) {
let _age = 0; // 私有变量
return {
getName: function() {
return name;
},
getAge: function() {
return _age;
},
setAge: function(age) {
if (typeof age === 'number' && age > 0) {
_age = age;
return true;
}
return false;
}
};
}
const person = createPerson('张三');
console.log(person.getName()); // 张三
console.log(person.getAge()); // 0
person.setAge(25);
console.log(person.getAge()); // 25
console.log(person._age); // undefined (无法直接访问私有变量)在这个例子中，_age是一个私有变量，外部无法直接访问，只能通过返回对象的方法来操作。
3. 闭包与循环问题
在早期的JavaScript中，闭包常与循环结合使用，导致一些意外的问题：
javascript
// 问题代码
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // 预期输出：0, 1, 2 实际输出：3, 3, 3
}, 1000);
}这个问题的原因是var声明的变量没有块级作用域，循环结束后i的值为3，所有的闭包都引用同一个i变量。
解决方法有两种：使用IIFE（立即执行函数表达式）或使用let关键字：
javascript
// 方法1：使用IIFE
for (var i = 0; i < 3; i++) {
(function(j) {
setTimeout(function() {
console.log(j); // 输出：0, 1, 2
}, 1000);
})(i);
}
// 方法2：使用let
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // 输出：0, 1, 2
}, 1000);
}4. 函数柯里化
闭包是实现函数柯里化（Currying）的基础：
javascript
function curryAdd(x) {
return function(y) {
return x + y;
};
}
const add5 = curryAdd(5);
console.log(add5(3)); // 8
console.log(add5(10)); // 15
const add10 = curryAdd(10);
console.log(add10(3)); // 13函数柯里化将一个接受多个参数的函数转换为一系列接受单个参数的函数，提高了函数的复用性和灵活性。
四、闭包的实际应用场景
1. 模块化开发
闭包是实现模块化开发的核心技术之一，它可以创建独立的命名空间，避免全局变量污染：
javascript
// 模块化示例 - 计数器模块
const CounterModule = (function() {
let count = 0; // 私有变量
function increment() {
count++;
}
function decrement() {
count--;
}
function getCount() {
return count;
}
// 暴露公共API
return {
increment,
decrement,
getCount
};
})();
CounterModule.increment();
CounterModule.increment();
console.log(CounterModule.getCount()); // 2
CounterModule.decrement();
console.log(CounterModule.getCount()); // 12. 回调函数与事件处理
在JavaScript中，回调函数和事件处理程序经常使用闭包：
javascript
function fetchData(url) {
return function(callback) {
fetch(url)
.then(response => response.json())
.then(data => callback(null, data))
.catch(error => callback(error, null));
};
}
const fetchUser = fetchData('https://api.example.com/users/1');
fetchUser(function(error, user) {
if (error) {
console.error('获取用户数据失败:', error);
} else {
console.log('用户数据:', user);
}
});3. 防抖与节流
防抖（Debounce）和节流（Throttle）是优化性能的常用技术，它们都可以通过闭包来实现：
javascript
// 防抖函数
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 节流函数
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => {
inThrottle = false;
}, limit);
}
};
}五、闭包的优缺点与注意事项
优点
- 数据封装与私有性：闭包可以创建私有变量和方法，实现数据封装
- 状态保持：闭包可以在函数调用之间保持状态
- 模块化开发：闭包是实现模块化的基础
- 函数柯里化：闭包支持函数柯里化，提高函数灵活性
缺点
- 内存泄漏风险：闭包会引用外部函数的变量，导致这些变量无法被垃圾回收
- 性能影响：闭包的创建和执行会有一定的性能开销
- 调试困难：闭包的作用域链比较复杂，调试起来比较困难
注意事项
- 避免不必要的闭包：只在需要时使用闭包，避免过度使用
- 及时释放内存：当不再需要闭包时，可以将其赋值为null，以便垃圾回收
- 注意this指向：在闭包中使用this时要特别小心，避免指向错误
- 避免循环引用：闭包可能导致循环引用，从而引发内存泄漏
javascript
// 避免内存泄漏的示例
function createClosure() {
let largeData = new Array(1000000).fill(0); // 大量数据
return function() {
console.log(largeData.length);
};
}
let closure = createClosure();
closure(); // 使用闭包
// 不再需要时释放内存
closure = null;六、总结
闭包本质上是JavaScript 词法作用域 （Lexical Scope）和 函数作为一等公民 （First-class Citizens）特性的自然产物。
- 词法作用域 ：函数的作用域由其在代码中定义的位置决定，而非调用位置
- 函数作为一等公民 ：函数可以被赋值给变量、作为参数传递、作为返回值返回 当这两个特性结合时，闭包就自然形成了：函数在离开其定义的词法作用域后，仍然能够访问该作用域中的变量。
javaScript设计闭包并非偶然，而是语言特性、编程范式和实际需求共同作用的结果。闭包使得JavaScript能够：
- 支持函数式编程
- 实现数据封装与私有化
- 保持函数状态
- 构建模块化系统
- 更好地适应浏览器环境的事件驱动编程模型
闭包是JavaScript最强大、最具特色的特性之一，理解它的设计初衷有助于我们更好地利用这一特性编写高质量的代码。
最后，记住这句话：闭包不是bug，而是JavaScript的特性。正确使用闭包，它会成为你的强大工具。
参考资料
如果本文对你有所帮助，欢迎点赞、评论和分享！如有任何问题或建议，也请随时提出。