JavaScript中閉包的四個有用技巧
本文轉載自微信公眾號「黑土豆的前端博客」，作者Maybe007。轉載本文請聯系黑土豆的前端博客公眾號。
前言
當談到JavaScript編程中的高級概念和技巧時，閉包（Closures）是一個重要而有趣的主題。閉包是一種函數與其創建時的詞法環境的組合，它允許我們捕獲和保留局部變量，并在函數之外使用它們。在這篇文章中，我們將深入探討JavaScript中閉包的4種有用技巧，以及如何應用它們來解決各種問題和提高代碼質量。
1. 解決循環中的問題
在JavaScript中，循環中的變量作用域問題經常會導致預期之外的結果。通常，使用var聲明變量會導致循環中的變量共享相同的作用域，因此在異步操作中，這些變量可能會具有意外的值。
問題場景：
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 輸出什么？
}, 1000 * i);
}上述代碼將在1秒、2秒和3秒后分別打印出3，三次都是相同的值。這是因為setTimeout是異步的，它在循環結束后才執行，此時i的值已經是3。
解決方法：
使用閉包來保存每次迭代中的i的值：
for (var i = 0; i < 3; i++) {
((n) => {
setTimeout(() => {
console.log(n); // 輸出0、1、2
}, 1000 * n);
})(i);
}或者，更簡單的方式是使用let來聲明循環變量，它將在每次迭代中創建一個新的作用域：
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 輸出0、1、2
}, 1000 * i);
}這2種方法都可以解決循環中的作用域問題。
2. 保存函數狀態
閉包還可以用于實現記憶功能，通過緩存計算結果來提高性能。這在需要重復計算的函數中特別有用。
問題場景：
實現一個累加器：
let sum = 1;
function add(num) {
sum += num;
return sum;
}
console.log(add(1));
console.log(add(5));每次調用add時，它都會將上次的值保存下來。但是這段代碼有潛在的問題，那就是sum可能會被其他部分代碼無意中修改。那如何解決？
解決方法：
使用閉包就可以規避上面存在的問題且可以緩存已經計算的值：
function calculator(val) {
let sum = val;
return function(num) {
sum += num;
return sum;
}
}
const add = calculator(1);
console.log(add(1)); //2
console.log(add(5)); //7每次調用返回的函數時，它都會將傳遞給它的數字加到總和中，并返回新的總和。
3. 封裝私有變量和屬性
在過去，為了保護對象的私有變量，常常使用閉包。通過閉包，可以將變量封裝在函數內部，只能通過函數暴露的接口來訪問和修改。
問題場景：
function add() {
let count = 0;
count++;
console.log(count);
}
add(); //輸出1
add(); //輸出1
add(); //輸出1調用函數，輸出的結果都是1，但是顯然我們想要的效果是讓count每次加1的。那如何解決呢？
解決方法：
使用閉包來封裝私有變量：
function add(){
let count = 0;
function a() {
count++;
console.log(count);
}
return a;
}
var res = add();
res() //1
res() //2
res() //3add函數返回了一個閉包a，其中包含了count變量。由于count只在add函數內部定義，因此外部無法直接訪問它。但是，由于a函數引用了count變量，因此count變量的值可以在閉包內部被修改和訪問，這樣就可以防止它被惡意修改了。
4. 函數柯里化
函數柯里化是一種將接受多個參數的函數轉化為一系列接受一個參數的函數的過程。這也可以通過閉包來實現。
問題場景：
const add = (a, b, c) => {
return a + b + c;
}
console.log(add(2, 3, 4)); // 輸出9解決方法：
使用閉包來實現函數柯里化：
function curry(callback) {
const args = [];
return function curried(...newArgs) {
args.push(...newArgs);
if (args.length >= callback.length) {
return callback(...args);
} else {
return curried;
}
};
}
function add(a, b, c) {
return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(2)(3)(4)); // 輸出 9函數柯里化使函數更加靈活，能夠逐步接受參數，提高代碼的可重用性和可讀
總結
在本文中，我們深入探討了JavaScript中閉包的4種有用技巧，以及如何應用它們來解決各種問題和提高代碼質量。這些技巧包括解決循環中的變量作用域問題，實現記憶功能以提高性能，封裝私有變量和屬性，以及使用函數柯里化來提高函數的靈活性。
閉包是JavaScript中一個強大的概念，它允許我們在函數之外訪問和操作局部變量，從而解決了許多常見的編程問題。雖然閉包在JavaScript中有著廣泛的應用，但也需要小心使用，以避免潛在的內存泄漏問題。確保在不再需要閉包時，及時釋放對其的引用，以幫助垃圾回收器正常運作。希望本文對你理解JavaScript中的閉包和如何應用它們有所幫助。
本文轉載自微信公眾號「黑土豆的前端博客」，可以通過以下二維碼關注。轉載本文請聯系公眾號。
