JavaScript var 閉包（Closure）入門教學筆記 | 學習筆記
· 閱讀時間約 4 分鐘
什麼是閉包（Closure）？
閉包是 JavaScript 中的一個重要概念，指的是函式在創建時，能夠記住並存取其外部作用域的變數，即使該作用域已經執行完畢。這種特性使得 JavaScript 的函式可以擁有「記憶」的能力，允許函式保持對外部變數的存取權。
閉包的概念建立在 JavaScript 的**詞法作用域（Lexical Scope）**之上，也就是函式可以存取其被定義時所在的作用域中的變數，而不是函式執行時的作用域。
1. 基本範例
function outerFunction() {
var outerVariable = "我是外部變數";
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
var closureExample = outerFunction();
closureExample(); // 輸出: "我是外部變數"
解析
outerFunction內部宣告了一個變數outerVariable，並定義了一個innerFunction。innerFunction存取outerVariable，並被outerFunction返回。- 當
closureExample執行時，即使outerFunction早已執行完畢，innerFunction仍然能存取outerVariable，這就是閉包的作用。
2. var 變數與閉包的問題
JavaScript 在 ES6 之前使用 var 來宣告變數，但 var 具有函式作用域（Function Scope），這可能會導致閉包相關的陷阱。
問題：for 迴圈與 var
function varClosureExample() {
var functions = [];
for (var i = 0; i < 3; i++) {
functions.push(function() {
console.log(i);
});
}
return functions;
}
var closures = varClosureExample();
closures[0](); // 輸出: 3
closures[1](); // 輸出: 3
closures[2](); // 輸出: 3
為什麼會這樣？
var是函式作用域，它在整個varClosureExample內部是共享的。- 當
closures[0]()、closures[1]()和closures[2]()執行時，它們都參考同一個i，但i已經變成3（因為for迴圈已經執行完畢）。 - 所有函式都會輸出
3，而不是0, 1, 2。
3. 如何修正 var 的問題
解決方案 1：使用 let（區塊作用域）
function letClosureExample() {
var functions = [];
for (let i = 0; i < 3; i++) {
functions.push(function() {
console.log(i);
});
}
return functions;
}
var closures = letClosureExample();
closures[0](); // 輸出: 0
closures[1](); // 輸出: 1
closures[2](); // 輸出: 2
為什麼 let 有效？
let具有區塊作用域（Block Scope），每次迴圈執行時，i都是一個新的變數，因此閉包綁定的i值不會變化。
解決方案 2：使用 IIFE（立即執行函式）
如果只能使用 var，可以使用 IIFE（Immediately Invoked Function Expression）：
function varClosureFixedExample() {
var functions = [];
for (var i = 0; i < 3; i++) {
(function(i) {
functions.push(function() {
console.log(i);
});
})(i);
}
return functions;
}
var closures = varClosureFixedExample();
closures[0](); // 輸出: 0
closures[1](); // 輸出: 1
closures[2](); // 輸出: 2
為什麼 IIFE 有效？
- IIFE 會立即執行，並建立一個新的作用域，確保每次迭代時
i都是獨立的。
4. 閉包的實際應用
(1) 模擬私有變數
function createCounter() {
var count = 0; // 外部變數
return {
increment: function() {
count++;
console.log(`計數器值: ${count}`);
},
decrement: function() {
count--;
console.log(`計數器值: ${count}`);
},
getCount: function() {
return count;
}
};
}
var counter = createCounter();
counter.increment(); // 計數器值: 1
counter.increment(); // 計數器值: 2
console.log(counter.getCount()); // 2
counter.decrement(); // 計數器值: 1
解析
count是createCounter內部變數，外部無法直接存取，只能透過increment和decrement方法修改，形成了私有變數的概念。
(2) 函式工廠（Function Factory）
function createMultiplier(multiplier) {
return function(number) {
return number * multiplier;
};
}
var double = createMultiplier(2);
var triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
解析
double變數是一個閉包，記住了multiplier為2。triple變數是一個閉包，記住了multiplier為3。- 這種模式可以用來建立彈性的函式生成器。
(3) 延遲執行與事件處理
function delayedMessage(message, delay) {
setTimeout(function() {
console.log(message);
}, delay);
}
delayedMessage("Hello, JavaScript!", 2000); // 2 秒後輸出 "Hello, JavaScript!"
解析
setTimeout內部的函式形成閉包，記住message變數，即使delayedMessage已經執行完畢。
5. 總結
閉包的核心概念
- 函式可以存取其外部函式的變數，即使外部函式已經執行完畢。
var變數的作用域為函式作用域，可能導致閉包內變數的值不如預期。- 使用
let或 IIFE 可以避免var造成的閉包問題。
閉包的應用
- 私有變數（避免全域變數污染）
- 函式工廠（建立可重複使用的函式）
- 事件處理與回調函式
- 延遲執行與計時器
閉包是 JavaScript 的核心概念之一，它允許函式記住外部變數，即使作用域已經離開。var 宣告的變數可能會導致作用域問題，例如 for 迴圈內的閉包錯誤，而 let 或 IIFE 可以解決這個問題。
掌握閉包後，可以更進一步學習 JavaScript 的函式式程式設計（Functional Programming），提升程式的模組化與可讀性。