深入理解JavaScript闭包：从入门到实战
## 前言
闭包（Closure）是JavaScript中最重要的概念之一，也是面试中的高频考点。很多前端开发者对闭包的理解停留在"函数里面套函数"的层面，但其实闭包的应用远比想象中广泛。
今天我们就来深入理解JavaScript闭包，从概念到原理，再到实战应用，一次性讲透。
---
## 什么是闭包？
先来看MDN的定义：
> 闭包是指有权访问另一个函数作用域中的变量的函数。
简单来说，当一个内部函数引用了外部函数的变量时，即使外部函数执行完毕，这些变量也不会被垃圾回收，因为内部函数还在引用它们。这种现象就叫做闭包。
### 最简单的闭包示例
```javascript
function outer() {
let count = 0;
function inner() {
count++;
console.log(count);
}
return inner;
}
const counter = outer();
counter(); // 1
counter(); // 2
counter(); // 3
```
在这个例子中outer函数执行完毕后，按道count变量应该被销毁。但因inner函数引用count，并inner被返回给了外部，所count一直保存在内存中。
这就是闭包的魔力。
---
## 闭包的底层原理
要理解闭包，首先要理解JavaScript的作用域链和执行上下文。
### 1. 执行上下文（Execution Context）
每次函数调用时，都会创建一个新的执行上下文。执行上下文中包含：
- 变量对象（Variable Object）
- 作用域链（Scope Chain）
- this指向
### 2. 作用域链（Scope Chain）
作用域链是当前执行上下文和所有父级执行上下文的变量对象组成的链表。
当访问一个变量时，JavaScript引擎会沿着作用域链从内到外查找，直到找到该变量或到达全局作用域。
### 3. 闭包的形成
当内部函数被返回并在外部调用时，虽然外部函数的执行上下文已经出栈，但内部函数的作用域链仍然保留着对外部函数变量对象的引用。
这就是为什么外部函数执行完毕后，变量仍然可以被访问——因为它们没有被垃圾回收。
---
## 闭包的常见应用场景
### 1. 数据私有化
闭包可以用来创建私有变量，这是模块化编程的基础。
```javascript
function createCounter() {
let count = 0; // 私有变量
return {
increment() {
count++;
return count;
},
decrement() {
count--;
return count;
},
getCount() {
return count;
}
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
console.log(counter.count); // undefined，无法直接访问
```
### 2. 函数柯里化（Currying）
柯里化是将接受多个参数的函数转换成一系列接受单个参数的函数的技术。
```javascript
function add(a) {
return function(b) {
return a + b;
};
}
const add5 = add(5);
console.log(add5(3)); // 8
console.log(add5(10)); // 15
```
### 3. 防抖和节流
前端性能优化中常用的防抖和节流，本质上也是闭包的应用。
```javascript
// 防抖
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 节流
function throttle(fn, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
```
### 4. 循环中的闭包问题
这是经典的面试题：
```javascript
// 错误写法
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出 3, 3, 3
}, 1000);
}
// 闭包解决
for (var i = 0; i < 3; i++) {
(function(j) {
setTimeout(() => {
console.log(j); // 输出 0, 1, 2
}, 1000);
})(i);
}
// 当然，现在更推荐用 let
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出 0, 1, 2
}, 1000);
}
```
---
## 闭包的注意事项
### 1. 内存泄漏风险
闭包会导致变量长期驻留内存，如果使用不当，可能造成内存泄漏。
```javascript
function createElement() {
const element = document.getElementById('myDiv');
const id = element.id;
element.onclick = function() {
console.log(id); // 引用了id，但没有引用element
};
// 更好的写法：解除对element的引用
element = null;
}
```
### 2. 性能影响
闭包的作用域链更长，变量查找会稍慢一些。但在现代JS引擎的优化下，这个影响微乎其微，不必过度担心。
---
## 总结
闭包是JavaScript的核心概念，理解闭包能让你写出更优雅的代码。
回顾一下重点：
- 定义：有权访问另一个函数作用域变量的函数
- 原理：作用域链保留对父级变量对象的引用
- 应用：数据私有化、柯里化、防抖节流、模块化
- 注意：合理使用，避免内存泄漏
希望这篇文章能帮你彻底理解闭包。如果觉得有用，欢迎分享给更多朋友！