理解 JavaScript 中的閉包

閉包是 JavaScript 中的一個基本概念，可以顯著影響您編寫和理解程式碼的方式。本質上，閉包允許函數從其外部作用域存取變量，即使在外部函數完成執行之後也是如此。這種功能非常強大，但也需要紮實的理解才能有效地使用。讓我們深入了解細節。

什麼是閉包？

closure 是一個捕捉創建它的詞法環境的函數。這意味著即使在外部函數完成執行之後，函數仍保留對其外部作用域的變數的存取權。在 JavaScript 中，每次在另一個函數中定義函數時都會建立閉包。

基本範例

為了掌握閉包，讓我們考慮一個簡單的例子：

function outerFunction() {
    let outerVariable = 'I am an outer variable';

    function innerFunction() {
        console.log(outerVariable); // Inner function can access the outer variable
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Logs: "I am an outer variable"

在此範例中：

1. externalFunction 宣告了一個局部變數outerVariable和一個內部函數innerFunction。
2. innerFunction 記錄outerVariable，示範對外部變數的存取。
3. externalFunction 傳回innerFunction，建立一個閉包。
4. myClosure 儲存了 innerFunction 的引用，即使在outerFunction 完成後仍可存取outerVariable。

詞法範圍和閉包

JavaScript 的詞法作用域表示函數的作用域由定義它的位置決定，而不是呼叫它的位置。閉包利用這種作用域機制，允許函數即使在外部函數返回後也可以從其外部作用域存取變數。

實例：私有變數

閉包通常用於建立私有變量，這些變數無法從其包含的函數外部存取：

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

這裡：

1. createCounter 初始化 count 並傳回一個具有遞增和遞減方法的物件。
2. 這兩種方法都形成捕獲和修改計數的閉包，該計數仍然是私有的。

進階範例：迭代器

閉包也可以用於建立有狀態迭代器，它在函數呼叫之間維護內部狀態：

function createIterator(array) {
    let index = 0;

    return {
        next: function() {
            if (index < array.length) {
                return { value: array[index++], done: false };
            } else {
                return { value: undefined, done: true };
            }
        }
    };
}

const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

在此範例中：

1. createIterator 在閉包中捕獲數組和索引。
2. next 方法使用捕獲的索引逐一傳回數組元素。

常見陷阱：循環中的閉包

在循環內部使用閉包有時會導致意外行為，特別是在非同步操作中。這是示範該問題的範例：

使用變數

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// Logs: 5 5 5 5 5

在這種情況下：

1. 循環完成，i 最終為 5。
2. 所有 setTimeout 回呼都引用相同的 i，即 5。

使用讓

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// Logs: 0 1 2 3 4

這裡：

1. 讓我們為每次迭代建立一個新的區塊範圍 i。
2. 每個 setTimeout 回調會捕捉不同的 i，從而產生預期的輸出。

概括

• 閉包：記住並可以存取其詞法環境的函數。
• 詞法作用域：函數的作用域是基於它們的定義位置，而不是呼叫位置。
• 私有變數：閉包可以封裝和保護變數。
• 迭代器：閉包可以維護狀態並提供資料的順序存取。
• 循環陷阱：對循環中的 var 保持謹慎，最好使用 let 以避免意外行為。

理解閉包及其細微差別將增強您編寫更強大且可維護的 JavaScript 程式碼的能力。明智地使用這些原則，您將能夠利用閉包有效地解決複雜問題。

追蹤我：Github Linkedin

以上是理解 JavaScript 中的閉包的詳細內容。更多資訊請關注PHP中文網其他相關文章！