JavaScript 程式札記 : 閉包(Closure)

更新於 發佈於 閱讀時間約 2 分鐘

什麼是閉包(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)它讓我們可以寫出更加模組化和靈活的程式碼。希望這篇文章能幫助你更好地理解和使用閉包。


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

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

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
async和await是建立在Promise基礎上的語法糖,讓我們可以用更直觀、更像同步程式的方式來寫非同步程式。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作,例如從伺服器取得資料,而你不希望整個程式都停下來等待這個操作完成,這時候就可以使用 Promise。
SQL 是一種專門用來和資料庫進行溝通的程式語言,它讓我們能夠創建資料表、新增、查詢、修改和刪除資料庫中的資料,本文將介紹基本的創建、新增、查詢、修改和刪除的 SQL 語法。
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
async和await是建立在Promise基礎上的語法糖,讓我們可以用更直觀、更像同步程式的方式來寫非同步程式。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作,例如從伺服器取得資料,而你不希望整個程式都停下來等待這個操作完成,這時候就可以使用 Promise。
SQL 是一種專門用來和資料庫進行溝通的程式語言,它讓我們能夠創建資料表、新增、查詢、修改和刪除資料庫中的資料,本文將介紹基本的創建、新增、查詢、修改和刪除的 SQL 語法。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
主要來講宣告函式跟箭頭函式 : 宣告函式(Function Declaration) 語法: function functionName(parameters) { return result; } 特點: 使用 function 關鍵字 函式名稱是必需的 存在函式
就是指變數可以被訪問和使用的範圍,來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
Thumbnail
本章節旨在介紹 C# 中函數的基本結構,包括訪問修飾符、返回類型、方法名稱、參數列表和方法體。同時,也介紹了函數的各種呼叫方式、參數傳遞方式和返回值類型。讀者可以通過本章節,深入理解 C# 中函數的使用和應用。
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
前言: 雖然前面有些定義還沒有完整的解釋,但還是後面再說吧, 誰想一直看理論啊(摔本子)
※ 認識變數: 變數(variable)是在程式裡面把東西存起來的概念。 基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。 變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
Thumbnail
接續著上次提到的 COUNT、COUNTA,我們再稍稍延伸一點,把 COUNT 函式的家族補完,介紹最後的兩名成員:COUNTUNIQUE 跟 COUNTBLANK。
對於程序式編程來說,程式是由一系列的指令組成,例如計算數值、印出訊息、修改變數、呼叫子程序、配置變數的記憶體空間等。定義函式是為了讓一些程序可以重複利用,因此稱為子程序,其中參數為子程序中特別的變數,讓我們能夠透過它們控制子程序的行為。函式的回傳值只是一種方便將結果帶回來的方法,但一般只能回傳一個值
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
主要來講宣告函式跟箭頭函式 : 宣告函式(Function Declaration) 語法: function functionName(parameters) { return result; } 特點: 使用 function 關鍵字 函式名稱是必需的 存在函式
就是指變數可以被訪問和使用的範圍,來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
Thumbnail
本章節旨在介紹 C# 中函數的基本結構,包括訪問修飾符、返回類型、方法名稱、參數列表和方法體。同時,也介紹了函數的各種呼叫方式、參數傳遞方式和返回值類型。讀者可以通過本章節,深入理解 C# 中函數的使用和應用。
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
前言: 雖然前面有些定義還沒有完整的解釋,但還是後面再說吧, 誰想一直看理論啊(摔本子)
※ 認識變數: 變數(variable)是在程式裡面把東西存起來的概念。 基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。 變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
Thumbnail
接續著上次提到的 COUNT、COUNTA,我們再稍稍延伸一點,把 COUNT 函式的家族補完,介紹最後的兩名成員:COUNTUNIQUE 跟 COUNTBLANK。
對於程序式編程來說,程式是由一系列的指令組成,例如計算數值、印出訊息、修改變數、呼叫子程序、配置變數的記憶體空間等。定義函式是為了讓一些程序可以重複利用,因此稱為子程序,其中參數為子程序中特別的變數,讓我們能夠透過它們控制子程序的行為。函式的回傳值只是一種方便將結果帶回來的方法,但一般只能回傳一個值
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。