2023-10-10|閱讀時間 ‧ 約 23 分鐘

JavaScript 程式札記 : 閉包(Closure)

什麼是閉包(Closure)

閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。

為什麼需要閉包?

如果你正在寫一個函式,這個函式需要記住某些資訊,但你不想讓這些資訊被外部的程式碼所存取或修改。這時候,閉包就派上用場了。

例如,你想要計算某個函式被呼叫了多少次。你可以使用閉包來達成這個目的。

function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}

const counter = createCounter();
console.log(counter()); // 輸出:1
console.log(counter()); // 輸出:2

在上面的範例中,createCounter 函式返回了一個內部函式。這個內部函式可以存取 count 變數,即使 createCounter 函式已經執行完畢。

閉包的實際應用

閉包在日常的 JavaScript 程式設計中有很多實際的應用。以下是一些常見的使用場景:

  1. 資料隱藏和封裝:如前面的計數器範例,我們可以使用閉包來隱藏內部的資料,只提供有限的接口給外部使用。
  2. 事件處理器和回調函式:當你在網頁上註冊一個事件處理器或回調函式時,這個處理器或回調函式可能需要存取外部的資訊。閉包可以幫助你實現這一點。
function setupButton(text) {
const button = document.createElement('button');
button.textContent = text;
button.addEventListener('click', function() {
alert('你點擊了:' + text);
});
document.body.appendChild(button);
}

setupButton('點我');

在上面的範例中,事件處理器是一個閉包,它可以存取 text 變數,即使 setupButton 函式已經執行完畢。

總之,閉包(Closure)它讓我們可以寫出更加模組化和靈活的程式碼。希望這篇文章能幫助你更好地理解和使用閉包。


😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.