在學習jQuery的時候，我們經常會看到“工廠函數”這個概念，那么究竟什么是“工廠函數”呢？我們來看看概念，“所謂工廠函數，就是指這些內建函數都是類對象，當你調用他們時，實際上是創建了一個類實例”。意思就是當我調用這個函數，實際上是先利用類創建了一個對象，然后返回這個對象。由於Javascript本身不是嚴格的面向對象的語言（不包含類），實際上來說，Javascript並沒有嚴格的“工廠函數”，但是在Javascript中，我們能利用函數模擬類。
我們首先通過new關鍵字創建了一個對象，obj就相當於Object的實例。我們通過類實例化了一個對象，然后給這個對象相應的屬性，最后返回對象。我們可以通過調用這個函數來創建對象，這樣的話，實際上工廠函數也很好理解了：
1，它是一個函數。
2，它用來創建對象。
3，它像工廠一樣，“生產”出來的函數都是“標准件”（擁有同樣的屬性）
不學習函數和對象，你不可能成為一名JavaScript程序員，並且當他們一起使用時，是構建塊，我們需要從一個稱為 組合(composition) 的強大對象范例開始。今天我們來看一些慣用的模式，使用工廠函數來組成函數，對象和 Promises 。組合模式是將一批子對象組織為樹形結構，一條頂層的命令會在操作樹中所有的對象。當一個函數返回一個對象時，我們稱之他為 工廠函數(factory function) 。
讓我們來看一個簡單的例子。
|
1
2
3
4
5
6
7
|
function
createJelly() {
return
{
type:
'jelly'
,
colour:
'red'
scoops: 3
};
}
|
下面我們通過一些實例給大家介紹。
每次我們調用這個工廠函數，它將返回一個新的 jelly（果凍） 對象實例。要注意的重點是，我們不必在工廠函數名稱前面加上 create ，但它可以讓其他人更清楚函數的意圖。對於 type 屬性也是如此，但通常它可以幫助我們區分我們程序的對象。
1.帶參數的工廠函數
像所有函數一樣，我們可以通過參數來定義我們的工廠函數 （icecream 冰淇淋），這可以用來改變返回對象的模型。
|
1
2
3
4
5
6
7
|
function
createIceCream(flavour=
'Vanilla'
) {
return
{
type:
'icecream'
,
scoops: 3,
flavour
}
}
|
理論上，您可以使用帶有數百個參數的工廠函數來返回非常特使的深層嵌套對象，但正如我們將看到的，這根本不是組合的精髓。
2.組合的工廠函數
在一個工廠函數中定義另一個工廠函數，可以幫助我們把復雜的工廠函數拆分成更小的，可重用的碎片。
例如，我們可以創建一個 dessert（甜點）工廠函數，通過前面的 jelly（果凍）和 icecream（冰淇淋）工廠函數來定義。
|
1
2
3
4
5
6
7
8
9
|
function
createDessert() {
return
{
type:
'dessert'
,
bowl: [
createJelly(),
createIceCream()
]
};
}
|
我們可以組合工廠函數來構建任意復雜的對象，這不需要我們結合使用 new 或 this 。對象可以用 has-a (具有) 關系而不是 is-a (是) 來表示。也就是說，可以用組合而不是繼承來實現。
例如，使用繼承。
|
1
2
3
4
5
6
7
8
9
10
11
|
// A trifle *is a* dessert 蛋糕*是*甜點
function
Trifle() {
Dessert.apply(
this
, arguments);
}
Trifle.prototype = Dessert.prototype;
// 或者
class Trifle extends Dessert {
constructor() {
super
();
}
}
|
我們可以用組合模式表達相同的意思。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// A trifle *has* layers of jelly, custard and cream. It also *has a* topping.
// 蛋糕 *有* 果凍層，奶酪層和奶油層，頂部還 *有* 裝飾配料。
function
createTrifle() {
return
{
type:
'trifle'
,
layers: [
createJelly(),
createCustard(),
createCream()
],
topping: createAlmonds()
};
}
|
3.異步的工廠函數
並非所有工廠都會立即返回數據。例如，有些必須先獲取數據。在這些情況下，我們可以返回 Promises 來定義工廠函數。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function
getMeal(menuUrl) {
return
new
Promise((resolve, reject) => {
fetch(menuUrl)
.then(result => {
resolve({
type:
'meal'
,
courses: result.json()
});
})
.
catch
(reject);
});
}
|
這種深度嵌套的縮進會使異步工廠難以閱讀和測試。將它們分解成多個不同的工廠通常是有幫助的，可以使用如下編寫。
|
1
2
3
4
5
6
7
8
9
10
11
|
function
getMeal(menuUrl) {
return
fetch(menuUrl)
.then(result => result.json())
.then(json => createMeal(json));
}
function
createMeal(courses=[]) {
return
{
type:
'meal'
,
courses
};
}
|
當然，我們可以使用回調函數，但是我們已經有了 Promise.all 這樣的工具返回 Promises 來定義工廠函數。
|
1
2
3
4
5
6
7
8
9
10
|
function
getWeeksMeals() {
const menuUrl =
'jsfood.com/'
;
return
Promise.all([
getMeal(`${menuUrl}/monday`),
getMeal(`${menuUrl}/tuesday`),
getMeal(`${menuUrl}/wednesday`),
getMeal(`${menuUrl}/thursday`),
getMeal(`${menuUrl}/friday`)
]);
}
|
我們使用 get 而不是 create 作為命名約定來顯示這些工廠做一些異步工作和返回promise。
4.函數和方法
到目前為止，我們還沒有看到任何工廠用方法返回對象，這是故意的。這是因為一般來說，我們不需要這么做。工廠允許我們從計算中分離我們的數據。這意味着我們總是能夠將對象序列化為JSON，這對於在會話之間持久化，通過HTTP或WebSockets發送它們，並將它們放入數據存儲很重要。
例如，不是在 jelly(果凍) 對象上定義 eat 方法，我們可以定義一個新的函數，它接受一個對象作為參數並返回一個修改的版本。
|
1
2
3
4
5
6
|
function
eatJelly(jelly) {
if
(jelly.scoops > 0) {
jelly.scoops -= 1;
}
return
jelly;
}
|
一點點句法幫助使這是一個可行的模式，那些喜歡編程而不改變數據結構的人。對於那些喜歡編程而不改變數據結構的人來說，使用 ES6 的 ... 語法 是一個可行的模式。
|
1
2
3
4
5
6
7
|
function
eat(jelly) {
if
(jelly.scoops > 0) {
return
{ ...jelly, scoops: jelly.scoops - 1 };
}
else
{
return
jelly;
}
}
|
現在，不是這樣寫：
|
1
2
|
import { createJelly } from
'./jelly'
;
createJelly().eat();
|
而是這樣寫
|
1
2
|
import { createJelly, eatJelly } from
'./jelly'
;
eatJelly(createJelly());
|
最終結果是一個函數，它接受一個對象並返回一個對象。我們稱之為返回對象的函數是什么？ 一個工廠！
5.高級工廠
將工廠傳遞給 高階函數 ，這將給我們帶來巨大的控制力。例如，我們可以使用這個概念來創建一個增強的對象。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function
giveTimestamp(factory) {
return
(...args) => {
const instance = factory(...args);
const time = Date.now();
return
{ time, instance };
};
}
const createOrder = giveTimestamp(
function
(ingredients) {
return
{
type:
'order'
,
ingredients
};
});
|
這個增強的對象采用一個現有工廠，並將其包裝以創建返回帶有時間戳實例的工廠。或者，如果我們想要確保一個工廠返回不可變的對象，我們可以用 freezer 來增強它。
|
1
2
3
4
5
|
function
freezer(factory) {
return
(...args) => Object.freeze(factory(...args)));
}
const createImmutableIceCream = freezer(createIceCream);
createImmutableIceCream(
'strawberry'
).flavour =
'mint'
;
// Error!
|