当前位置：首页 > article >正文

JavaScript篇：闭包：JavaScript中的魔法口袋，装下你的编程智慧

article 2025/8/30 6:38:06

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

什么是闭包？

闭包的五大实用场景

1. 数据封装与私有变量

2. 函数工厂

3. 事件处理与回调

4. 模块模式

5. 记忆化(Memoization)优化

闭包的常见误区

1. 循环中的闭包陷阱

2. 内存泄漏风险

现代JavaScript中的闭包

性能考量

结语

作为一名前端开发者，我至今还记得第一次理解闭包时那种"啊哈！"的顿悟时刻。闭包就像是JavaScript送给我们的一个魔法口袋，看起来简单，却能装下无穷的编程智慧。今天，就让我来为你揭开这个魔法口袋的秘密。

什么是闭包？

简单来说，闭包就是能够访问其他函数内部变量的函数。就像我有一个私人保险箱（函数内部的变量），然后给了你一把钥匙（返回的函数），这样即使我离开了（外部函数执行完毕），你依然可以打开保险箱访问里面的东西。

function createCounter() {let myCount = 0; // 这个变量将被"封闭"在返回的函数中return function() {myCount++;return myCount;};
}const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

闭包的五大实用场景

1. 数据封装与私有变量

在ES6之前，JavaScript没有原生的私有成员概念，闭包帮我们实现了这一点：

function createPerson(myName) {let age = 0; // 私有变量return {getName: function() {return myName;},getAge: function() {return age;},celebrateBirthday: function() {age++;return `Happy birthday, ${myName}! You're now ${age} years old.`;}};
}const me = createPerson('John');
console.log(me.getName()); // "John"
console.log(me.getAge()); // 0
console.log(me.celebrateBirthday()); // "Happy birthday, John! You're now 1 years old."
console.log(me.age); // undefined - 无法直接访问

2. 函数工厂

闭包让我们可以轻松创建功能相似但配置不同的函数：

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

3. 事件处理与回调

闭包在事件处理中特别有用，可以记住创建时的上下文：

function setupButtons() {const colors = ['red', 'green', 'blue'];for (var i = 0; i < colors.length; i++) {// 使用IIFE创建闭包来捕获每个迭代的i值(function(index) {document.getElementById(`btn-${index}`).addEventListener('click', function() {console.log(`You clicked the ${colors[index]} button`);});})(i);}
}// 现代写法可以用let替代IIFE
function setupButtonsModern() {const colors = ['red', 'green', 'blue'];for (let i = 0; i < colors.length; i++) {document.getElementById(`btn-${i}`).addEventListener('click', function() {console.log(`You clicked the ${colors[i]} button`);});}
}

4. 模块模式

闭包是实现模块化的基础，在ES6之前是主要的模块化方案：

const myModule = (function() {const privateVar = 'I am private';function privateMethod() {console.log(privateVar);}return {publicMethod: function() {privateMethod();},publicVar: 'I am public'};
})();console.log(myModule.publicVar); // "I am public"
myModule.publicMethod(); // "I am private"
console.log(myModule.privateVar); // undefined

5. 记忆化(Memoization)优化

闭包可以用来缓存昂贵的函数调用结果：

function memoize(fn) {const cache = {};return function(...args) {const key = JSON.stringify(args);if (cache[key] !== undefined) {console.log('Fetching from cache');return cache[key];} else {console.log('Calculating result');const result = fn.apply(this, args);cache[key] = result;return result;}};
}// 一个计算量大的函数
function expensiveCalculation(n) {console.log('Performing expensive calculation...');return n * n;
}const memoizedCalculation = memoize(expensiveCalculation);console.log(memoizedCalculation(5)); // 计算并缓存
console.log(memoizedCalculation(5)); // 从缓存读取

闭包的常见误区

1. 循环中的闭包陷阱

// 常见错误示例
for (var i = 0; i < 3; i++) {setTimeout(function() {console.log(i); // 全部输出3！}, 100);
}// 解决方案1：使用IIFE
for (var i = 0; i < 3; i++) {(function(index) {setTimeout(function() {console.log(index); // 0, 1, 2}, 100);})(i);
}// 解决方案2：使用let
for (let i = 0; i < 3; i++) {setTimeout(function() {console.log(i); // 0, 1, 2}, 100);
}

2. 内存泄漏风险

闭包会阻止垃圾回收器回收被引用的变量，不当使用可能导致内存泄漏：

// 可能导致内存泄漏的示例
function setupHugeData() {const hugeData = getHugeData(); // 获取大量数据return function() {// 即使外部不需要hugeData了，闭包仍保持引用doSomethingWith(hugeData.smallPart);};
}// 解决方案：在不需要时手动解除引用
function setupHugeDataSafe() {const hugeData = getHugeData();const smallPart = hugeData.smallPart;// 不再保留对hugeData的引用hugeData = null;return function() {doSomethingWith(smallPart);};
}

现代JavaScript中的闭包

随着ES6+的普及，闭包的使用变得更加简洁优雅：

// 使用箭头函数
const createAdder = (x) => (y) => x + y;
const add5 = createAdder(5);
console.log(add5(3)); // 8// 结合解构
const createUser = ({ firstName, lastName }) => ({getFullName: () => `${firstName} ${lastName}`,setLastName: (newLastName) => { lastName = newLastName; }
});const user = createUser({ firstName: 'John', lastName: 'Doe' });
console.log(user.getFullName()); // "John Doe"
user.setLastName('Smith');
console.log(user.getFullName()); // "John Smith"