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


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

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

60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 [email protected]
留言0
查看全部
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
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
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
工作上固定頻率會收到User提供的設定需求資訊,檔案大多為excel的格式.xlsx或.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。 既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
工作上固定頻率會收到User提供的設定需求資訊,檔案大多為excel的格式.xlsx或.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。 既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架