【JavaScript】閉包 Closure

🚩 前言

閉包是 範圍鏈、記憶體空間、表達式、函式 … 等等的觀念整合，
本篇使用錢包的概念來做介紹。

function storeMoney(cash) {
	let wallet = 1000;
	return function (cash) {
		wallet = wallet + cash;
		return wallet;
	}
}
console.log(storeMoney());

function storeMoney(cash) {...} 是一段陳述式，
console.log(storeMoney()); 是一個表達式的寫法，
因為 storeMoney 裡面還有個 return，
因此 console.log(storeMoney()); 會印出 return 的值。

而要去呼叫 return 出來的 function，
只要在後面多個小括弧就可了。

console.log(storeMoney()(100)); // 1100

因為這個範例 price 有做到運算，
所以是需要帶值進去，
否則 wallet + undefined = NaN 。

閉包

記憶體空間

console.log(storeMoney()(100)); // 1100
console.log(storeMoney()(100)); // 1100
console.log(storeMoney()(100)); // 1100

去呼叫該 function 並給予值，就會印出金額，
storeMoney()(100) 會印出 1100，
但因為執行完了記憶體被釋放，
因此在執行一次的話原本的 wallet 並不會累加上去。

範圍鏈

let pikachuWallet = storeMoney();
let dragoniteWallet = storeMoney();
console.log(pikachuWallet(100)); // 1100
console.log(pikachuWallet(100)); // 1200
console.log(pikachuWallet(100)); // 1300
console.log(dragoniteWallet(1000)); // 2000
console.log(dragoniteWallet(1000)); // 3000
console.log(dragoniteWallet(1000)); // 4000

pikachuWallet 與 dragoniteWallet 都有屬於自己的函式 storeMoney，
並且擁有自己的變數 wallet，
彼此之間不會互相干擾。
這就是一個完整的閉包概念。