Factory Function 與 Object Literal 是絕配

在 OOP 的 Factory Function 是用來回傳 Object,而在 FP 有所謂 Function Factory,目的是用來回傳 Function。

Version


ECMAScript 2015

Function Factory


實務上的 Function Factory 有兩種:

  • 根據參數回傳已知 Function
  • 根據參數建立新的 Function

回傳已知 Function


Switch Case

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const funcA = () => 'a';
const funcB = () => 'b';
const emptyFunc = () => {};

const factoryFunc = funcName => {
switch (funcName) {
case 'funcA':
return funcA;

case 'funcB':
return funcB;

default:
return emptyFunc;
}
};

console.log(factoryFunc('funcA')());
console.log(factoryFunc('funcB')());
console.log(factoryFunc('funcC')());

已經準備好 funcAfuncB,在 factoryFunc() 由 user 傳入 function 名稱,就回傳指定的 function。

最直覺的寫法就是使用 switch case

factory000

Object Literal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const funcA = () => 'a';
const funcB = () => 'b';
const emptyFunc = () => {};

const funcMap = {
funcA,
funcB,
};

const factoryFunc = funcName => funcMap[funcName] || emptyFunc;

console.log(factoryFunc('funcA')());
console.log(factoryFunc('funcB')());
console.log(factoryFunc('funcC')());

由於 Object Literal 的 key / value 特性,其實可以用來取代 switch case,至於 default 則使用 || 表示。

factory001

建立新的 Function


Higher Order Function

1
2
3
4
const data = [1, 2, 3];

console.log(data.map(x => x * 2));
console.log(data.map(x => x * 2 + 1));

ECMAScript 提供很多 Higher Order Function,如 Array.prototypesetTimeout() ,我們會傳入 Arrow Function。

若 Arrow Function 有重複,或者類似規則的 Arrow Function 不斷出現,則可藉由 Closure 抽出 Function Factory。

1
2
3
4
5
6
const data = [1, 2, 3];

const makeMapper = (a, b) => x => a * x + b;

console.log(data.map(makeMapper(2, 0)));
console.log(data.map(makeMapper(2, 1)));

抽出 makeMappr(),藉由傳入不同 argument 給 makeMapper() 產生不同的 Arrow Fuction 給 map()

factory002

Object Method

1
2
3
4
5
6
7
const foo = {
func1: x => 2 * x + 3,
func2: x => 3 * x + 1,
};

console.log(foo.func1(1));
console.log(foo.func2(1));

當使用 Object Literal 定義 method 時,若 method 有重複,或者類似規則的 method 不斷出現,則可藉由 Closure 抽出 Function Factory。

1
2
3
4
5
6
7
8
9
const makeFunc = (a, b) => x => a * x + b;

const foo = {
func1: makeFunc(2, 3),
func2: makeFunc(3, 1),
};

console.log(foo.func1(1));
console.log(foo.func2(1));

func1()func2() 可藉由 makeFunc() 產生。

抽出 makeFunc(),藉由傳入不同 argument 給 makeFunc() 產生不同的 method。

factory003

Conclusion


  • Function Factory 是 FP 在實務上最常使用的技巧,透過 Object Literal 可回傳既有 function,而透過 Closure 則可建立新 function
2018-12-14