JavaScript基礎閉包觀念

前言

JavaScript 中有一個閉包的觀念,滿時常聽人家在講閉包閉包,稍微查了一下相關文章這邊也做一下筆記。

閉包(Closure)

首先 MDN 文件有簡短的說明解釋【閉包(Closure)是函式以及該函式被宣告時所在的作用域環境(lexical environment)的組合。】,但是解釋文字有點文謅謅看不懂,我自己吸收觀看之後的解釋是【是指宣告再函式中的函式】,那什麼叫做【函式中的函式】?

範例

閉包的觀念主要也是與變數的作用域有關係,所以這邊寫一段範例來講解。

1
2
3
4
5
6
7
8
9
10
11
// icash餘額初始有 1000 $
var icash = 1000;

function count(price) {
return icash = icash - price;

}

count(50);
count(50);
console.log(icash);

接下來再隔好幾行程式碼後,再呼叫 icash 變數,而這時候我希望是 icash 每個人的初始餘額是 1000 + 200。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// icash餘額初始有 1000 $
var icash = 1000;

function count(price) {
return icash = icash - price;

}

count(50);
count(50);
console.log(icash);


function countAdd(price) {
return icash = icash + price;

}

countAdd(200);
console.log(icash);

這時候會發現 icash 竟然變成了 1100 $,那這也與作用與汙染有關係,所以閉包該如何撰寫呢?

1
2
3
4
5
6
7
8
9
10
function count() {
var icash = 1000;
return function (price){
icash = icash - price;
return icash;
}
}
var item = count();
item(100);
item(200);

可以發現 icash 餘額減少了,那每一次執行時就只會跑內層的 function,也只會更新內層的 icash 變數。

這邊要注意由於 item 指向了 count() ,所以可以不停地使用這個方法,但是內部的記憶體 (icash) 並不會被釋放,所以就可以一直使用。

結語

基本上閉包的基礎觀念就是這樣子,但是感覺寫的並不是很詳細。

參考文章:

鐵人賽:另一種方式介紹 JavaScript 閉包

MDN

pjchender

0%