JavaScript 核心觀念(39)-函式以及 This 的運作-閉包進階:工廠模式及私有方法

前言

接下來是關於閉包稍微進階一點的方式。

閉包進階

上個章節我們了解到了閉包的最主要觀念在於記憶體的參考以及記憶體的釋放,因此在上個章節的範例我們就可以更進階的去修改成為一個工廠模式,而工廠模式是什麼呢?工廠是一個抽象的概念,最主要是提供一個 interface 來給予使用,因此通常工廠模式中可能會傳遞一些參數,並提供重複性的動作來回傳結果。

以上個章節的範例來講,我們就可以修改成透過使用者傳入參數的方式決定金額

1
2
3
4
5
6
7
function fn(value) {
var money = value || 0; // 當使用者沒有傳入值的時候就會以 0 為主。
return function(num) {
money = money + num;
return money;
}
}

因為我們就可以透過 fn 來不停的建立新的閉包,並且都是透過使用者傳遞參數來生成,而這種也稱之為工廠模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(value) {
var money = value || 0; // 當使用者沒有傳入值的時候就會以 0 為主。
return function(num) {
money = money + num;
return money;
}
}

var a = fn(100);
a(100); // 200

var b = fn(1000);
b(2000); // 3000;

而在此閉包也有另一個特性稱之為私有方法,而私有方法不單只是回傳一個函式,也可以回傳各種方法,例如回傳一個物件,這邊舉例一個我先前寫得閉包範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function myMoney(storage) {
var money = storage;
console.log(money);
return function(price) {
return { // 使用物件函數的方式來製作功能查詢及扣除餘額
nowMoney: function () {
return console.log(money);
},
count: function (price) {
if(money < price) return console.log('餘額不足,目前餘額: ' + money + ' $'); // 當 price 大於目前 餘額 money 就回傳錯誤。
if (!money <= 0) { // 當 money 等於 0 或是小於 money 就不進入計算。
return money = money - price;
}
return console.log('餘額扣除失敗,目前餘額: ' + money + ' $');
}
}
}
}
// 小明比較窮只儲值 500$
var ming = myMoney(500);
// 小美暴發戶儲值了 5000$
var mei = myMoney(5000);
// 小王不知道哪裡來的錢,儲值了 30000$
var wang = myMoney(30000);

// 小明連三天都花了 500$
ming().count(100);
ming().count(100);
ming().count(300);
//查詢小明目前餘額
ming().nowMoney();
// 小美花了 2300
mei().count(1600);
mei().count(100);
mei().count(600);
//查詢小美目前餘額
mei().nowMoney();
// 小王只花300
wang().count(300);
// 查詢小王目前餘額
wang().nowMoney();

在上方可以看到 return 回來的是一個物件,透過這個方式我們就可以建立許多的方法,因此這些就稱之為私有方法。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ