如何實現 Function Factory ?
栏目: JavaScript · 发布时间: 7年前
内容简介：在 OOP 的 Factory Function 是用來回傳 Object，而在 FP 有所謂 Function Factory，目的是用來回傳 Function。ECMAScript 2015實務上的 Function Factory 有兩種：
在 OOP 的 Factory Function 是用來回傳 Object，而在 FP 有所謂 Function Factory，目的是用來回傳 Function。
Version
ECMAScript 2015
Function Factory
實務上的 Function Factory 有兩種：
- 根據參數回傳已知 Function
- 根據參數建立新的 Function
根據參數回傳已知 Function
Switch Case
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')());
已經準備好 funcA 、 funcB ，在 factoryFunc() 由 user 傳入 function 名稱 ，就回傳指定的 function。
最直覺的寫法就是使用 switch case 。
Object Literal
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 則使用 || 表示。
根據參數建立新的 Function
Higher Order Function
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.prototype 與 setTimeout() ，我們會傳入 Arrow Function。
若 Arrow Function 有重複，或者類似規則的 Arrow Function 不斷出現，則可藉由 Closure 抽出 Function Factory。
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() 。
Object Method
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。
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。
Conclusion
- Function Factory 是 FP 在實務上最常使用的技巧，透過 Object Literal 可回傳既有 function，而透過 Closure 則可建立新 function
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
