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

一篇文章理解js闭包和作用于原理

backend 2025/6/19 14:45:58

一、js闭包的作用原理

JS闭包是指内部函数访问外部函数变量的机制，常用于数据封装和模块化。典型应用包括创建私有变量、解决循环中的异步问题、实现函数柯里化等。案例分析展示了闭包在计数器、防抖函数等场景的使用，同时揭示了可能的内存泄漏风险。正确使用闭包需理解作用域链，合理管理内存，避免变量意外共享。闭包在异步编程和函数式编程中发挥重要作用，是JavaScript的核心特性之一。

二、案例分析

1. 基本闭包示例

function outerFunction(x) {// 外部函数的变量let outerVariable = x;// 内部函数（闭包）function innerFunction(y) {console.log(`外部变量: ${outerVariable}, 内部参数: ${y}`);return outerVariable + y;}return innerFunction;
}const closure = outerFunction(10);
console.log(closure(5)); // 输出: 外部变量: 10, 内部参数: 5, 返回: 15

2.闭包的实际应用 - 数据私有化

function createCounter() {let count = 0; // 私有变量return {increment: function() {count++;return count;},decrement: function() {count--;return count;},getCount: function() {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 - 无法直接访问私有变量

3. 闭包在循环中的经典问题

// 错误示例 - 所有函数都会输出3
console.log('错误示例:');
for (var i = 0; i < 3; i++) {setTimeout(function() {console.log(`错误示例 - i的值: ${i}`); // 都输出3}, 100);
}// 正确示例1 - 使用闭包
console.log('正确示例1 - 使用闭包:');
for (var i = 0; i < 3; i++) {(function(index) {setTimeout(function() {console.log(`闭包解决 - index的值: ${index}`);}, 200);})(i);
}// 正确示例2 - 使用let
console.log('正确示例2 - 使用let:');
for (let i = 0; i < 3; i++) {setTimeout(function() {console.log(`let解决 - i的值: ${i}`);}, 300);
}

4. 模块模式

const MyModule = (function() {let privateVariable = 0;function privateFunction() {console.log('这是私有函数');}return {publicMethod: function() {privateVariable++;privateFunction();console.log(`私有变量值: ${privateVariable}`);},getPrivateVariable: function() {return privateVariable;}};
})();MyModule.publicMethod(); // 这是私有函数, 私有变量值: 1
console.log(MyModule.getPrivateVariable()); // 1

5. 函数柯里化（Currying）

function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return function(...nextArgs) {return curried.apply(this, args.concat(nextArgs));};}};
}function add(a, b, c) {return a + b + c;
}const curriedAdd = curry(add);
console.log('\n=== 柯里化示例 ===');
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

6. 作用域链示例

let globalVar = 'global';function level1() {let level1Var = 'level1';function level2() {let level2Var = 'level2';function level3() {let level3Var = 'level3';console.log('\n=== 作用域链 ===');console.log(`访问level3变量: ${level3Var}`);console.log(`访问level2变量: ${level2Var}`);console.log(`访问level1变量: ${level1Var}`);console.log(`访问全局变量: ${globalVar}`);}level3();}level2();
}level1();

7. 闭包的内存管理

function createHeavyObject() {const heavyData = new Array(1000000).fill('data');return function() {// 只返回需要的数据，避免整个heavyData被保持在内存中return heavyData.length;};
}const getLength = createHeavyObject();
console.log('\n=== 内存管理 ===');
console.log(`数组长度: ${getLength()}`);

8. 实际应用：防抖函数

function debounce(func, delay) {let timeoutId;return function(...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};
}const debouncedLog = debounce((message) => {console.log(`防抖执行: ${message}`);
}, 1000);// 模拟快速调用
console.log('\n=== 防抖示例 ===');
debouncedLog('第一次调用');
debouncedLog('第二次调用');
debouncedLog('第三次调用'); // 只有这个会执行