JavaScript 中閉包的奧秘！-js教程-PHP中文網

JavaScript 中閉包的奧秘！

Linda Hamilton

發布： 2024-11-27 01:50:14

原創

673 人瀏覽過

Mystery of Closures in JavaScript!

乍一看，閉包可能看起來是一個複雜的概念，但不用擔心它們比看起來簡單得多！讓我們消除困惑並解決一些關於閉包的常見誤解。

關於閉包的常見誤解

❌ 閉包是可以存取其周圍範圍的特殊函數。
不正確

閉包與函數不同。
在 JavaScript 中，每個函數本質上都可以存取其定義的作用域。這就是函數的工作原理！

❌ 閉包需要巢狀函數。
又錯了

巢狀函數與建立閉包無關。
每當建立函數時，它都會自動與其周圍的作用域形成一個閉包，不需要巢狀。

現實是什麼❓

閉包並不是什麼神奇或獨特的功能。相反，它們只是函數和創建該函數的作用域中的變數的組合。每個函數都與此上下文捆綁在一起 - 將其視為對其來源的記憶。

這是 MDN 核准的定義：

閉包是一個函數與其周圍狀態的引用捆綁在一起的組合。

用簡單的英語來說，閉包可以讓你的函數「記住」創建它的地方的變量，即使它是在其他地方執行的。

讓我們來看看閉包的實際應用??‍?

這是一個有趣的小例子：

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

登入後複製

這裡發生了什麼事？？
當呼叫 createCounter 時，會在其作用域內建立一個變數 count。
即使 createCounter 已經完成運行，返回的函數也會記住 count。
每次呼叫計數器時，由於閉包，它都可以存取和更新計數。

為什麼閉包很重要？？

閉包不只是一個優秀面試的理論概念－它們非常有用！以下是一些現實世界的場景：

1. 資料隱私

閉包可以使變數保持私有並且無法從外界存取。

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

登入後複製

2. 事件處理程序

當您想要「記住」某些狀態時，閉包對於事件偵聽器來說非常方便。

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

登入後複製

3. 部分申請

閉包讓您可以預先設定函數的參數。

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

登入後複製

等等，關閉完美嗎❓

並非總是如此！如果您不小心，閉包可能會因保留對變數的引用時間超過必要的時間而導致記憶體洩漏。例如，當在循環內部使用閉包時，很容易產生意想不到的行為：

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

登入後複製

要解決此問題，您可以使用 let （區塊作用域）或 IIFE：

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

登入後複製