《前端面试题：JavaScript 闭包深度解析》

JavaScript 闭包深度解析：从原理到高级应用

一、闭包的本质与核心概念

闭包（Closure）是 JavaScript 中最强大且最常被误解的概念之一。理解闭包不仅是掌握 JavaScript 的关键，也是区分初级和高级开发者的重要标志。

1. 什么是闭包？

闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用的，但既不是函数参数也不是函数局部变量的变量。

简单来说：闭包 = 函数 + 函数能够访问的自由变量

function outer() {const outerVar = 'I am outside!';function inner() {console.log(outerVar); // 访问外部函数作用域中的变量}return inner;
}const myInner = outer();
myInner(); // 输出: "I am outside!"

在这个例子中：

inner 函数可以访问 outerVar（自由变量）
即使 outer 函数已经执行完毕，inner 函数仍然可以访问 outerVar

2. 闭包的形成条件

嵌套函数：一个函数（outer）内部定义了另一个函数（inner）
内部函数引用外部变量：inner 函数引用了 outer 函数作用域中的变量
内部函数被导出：inner 函数被返回或在外部被使用

二、闭包的核心原理：词法作用域

要理解闭包，必须掌握 JavaScript 的作用域机制：

1. 词法作用域（Lexical Scoping）

JavaScript 采用词法作用域，函数的作用域在函数定义时就已确定，而不是在函数调用时确定。

let globalVar = 'global';function outer() {let outerVar = 'outer';function inner() {let innerVar = 'inner';console.log(globalVar, outerVar, innerVar);}return inner;
}const innerFunc = outer();
innerFunc(); // 输出: "global outer inner"

2. 作用域链（Scope Chain）

当函数被创建时，它会保存一个对其外部作用域的引用链。当访问变量时，JavaScript 引擎会沿着这条链查找：

当前函数作用域
外部函数作用域
全局作用域

function createCounter() {let count = 0; // 被闭包"捕获"的变量return function() {count++; // 访问外部作用域的变量return count;};
}const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

三、闭包的实际应用场景

1. 数据封装（私有变量）

function createBankAccount(initialBalance) {let balance = initialBalance; // 私有变量return {deposit: function(amount) {balance += amount;return balance;},withdraw: function(amount) {if (amount > balance) {throw new Error('Insufficient funds');}balance -= amount;return balance;},getBalance: function() {return balance;}};
}const account = createBankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(500);
console.log(account.getBalance()); // 1500
account.withdraw(200);
console.log(account.getBalance()); // 1300

2. 函数工厂

function createMultiplier(multiplier) {return function(x) {return x * multiplier;};
}const double = createMultiplier(2);
const triple = createMultiplier(3);console.log(double(5)); // 10
console.log(triple(5)); // 15

3. 模块模式

const calculator = (function() {let memory = 0;return {add: function(a, b) {const result = a + b;memory = result;return result;},subtract: function(a, b) {const result = a - b;memory = result;return result;},getMemory: function() {return memory;}};
})();console.log(calculator.add(5, 3)); // 8
console.log(calculator.getMemory()); // 8
console.log(calculator.subtract(10, 4)); // 6
console.log(calculator.getMemory()); // 6

4. 回调函数和事件处理

function setupButton(buttonId) {const button = document.getElementById(buttonId);let clickCount = 0;button.addEventListener('click', function() {clickCount++;console.log(`Button ${buttonId} clicked ${clickCount} times`);});
}setupButton('btn1');
setupButton('btn2');

四、闭包与内存管理

1. 内存泄漏风险

// 问题示例
function createHeavyObject() {const heavyArray = new Array(1000000).fill('*');return function() {console.log('Heavy object is kept in memory!');};
}const heavyFunc = createHeavyObject();
// heavyArray 会一直存在内存中，直到 heavyFunc 被释放

2. 如何避免内存泄漏

// 解决方案：不再需要时解除引用
let heavyFunc = createHeavyObject();// 使用完毕后
heavyFunc = null; // 释放闭包占用的内存

3. 现代 JavaScript 引擎优化

现代 JavaScript 引擎（V8 等）会进行智能优化：

只保留闭包中实际使用的变量
未被引用的闭包会被垃圾回收
使用开发者工具检测内存泄漏

五、闭包常见面试题解析

1. 经典循环问题

for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 100);
}
// 输出: 5, 5, 5, 5, 5

解决方案：

// 方案1: 使用IIFE创建闭包
for (var i = 0; i < 5; i++) {(function(j) {setTimeout(function() {console.log(j);}, 100);})(i);
}// 方案2: 使用let块级作用域
for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 100);
}

2. 实现私有方法

function Person(name) {let _name = name; // 私有变量this.getName = function() {return _name;};this.setName = function(newName) {_name = newName;};
}const person = new Person('Alice');
console.log(person.getName()); // "Alice"
person.setName('Bob');
console.log(person.getName()); // "Bob"

3. 闭包与事件处理

// 问题：所有按钮都显示5
const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {buttons[i].addEventListener('click', function() {console.log('Button ' + i + ' clicked');});
}// 解决方案：闭包保存索引
for (var i = 0; i < buttons.length; i++) {(function(index) {buttons[index].addEventListener('click', function() {console.log('Button ' + index + ' clicked');});})(i);
}

六、高级闭包技巧

1. 函数柯里化（Currying）

function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return function(...args2) {return curried.apply(this, args.concat(args2));};}};
}const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6
console.log(curriedSum(1)(2, 3)); // 6

2. 惰性函数（Lazy Function）

function getElementPosition() {let offset = null;return function() {if (offset === null) {const element = document.getElementById('target');offset = {x: element.offsetLeft,y: element.offsetTop};}return offset;};
}const getPosition = getElementPosition();
console.log(getPosition()); // 首次计算
console.log(getPosition()); // 直接返回缓存值

3. 部分应用函数（Partial Application）

function partial(fn, ...presetArgs) {return function(...laterArgs) {return fn.apply(this, presetArgs.concat(laterArgs));};
}function log(level, message, timestamp) {console.log(`[${level}] ${timestamp}: ${message}`);
}const logError = partial(log, 'ERROR');
const logDebug = partial(log, 'DEBUG');logError('Connection failed', new Date().toISOString());
// [ERROR] 2023-08-05T10:30:00.000Z: Connection failedlogDebug('Processing data', new Date().toISOString());
// [DEBUG] 2023-08-05T10:30:05.000Z: Processing data

七、闭包的最佳实践

最小化闭包范围：只保留必要的变量
避免循环引用：防止内存泄漏
及时解除引用：不再使用的闭包设为 null
合理使用模块模式：组织代码结构
优先使用块级作用域：用 let/const 替代 var

八、闭包与性能

闭包确实有性能开销，因为：

创建作用域链需要额外内存
变量查找需要遍历作用域链

但现代 JavaScript 引擎已高度优化闭包性能：

V8 的 “闭包分析” 只保留必要变量
未被引用的闭包会被及时回收
性能影响在大多数场景下可忽略

九、闭包在现代 JavaScript 中的应用

1. React Hooks 中的闭包

function Counter() {const [count, setCount] = useState(0);useEffect(() => {const timer = setInterval(() => {console.log(`Current count: ${count}`);// 闭包捕获了count创建时的值}, 1000);return () => clearInterval(timer);}, []);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

2. 函数式编程

// 使用闭包实现函数组合
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);const add5 = x => x + 5;
const multiplyBy2 = x => x * 2;
const square = x => x * x;const transform = compose(square, multiplyBy2, add5);
console.log(transform(5)); // ((5 + 5) * 2) ^ 2 = 400