一、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('第三次調用'); // 只有這個會執行

?三、總結

1. 閉包允許內部函數訪問外部函數的變量

2. 閉包可以用于數據私有化和模塊模式

3. 注意閉包可能導致的內存泄漏問題

4. 閉包在異步編程和函數式編程中非常有用

5. 理解作用域鏈對掌握閉包至關重要