如何實現 Function Factory ?

栏目: JavaScript · 发布时间: 5年前

内容简介:在 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')());

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

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

如何實現 Function Factory ?

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 Factory ?

根據參數建立新的 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.prototypesetTimeout() ,我們會傳入 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()

如何實現 Function Factory ?

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。

如何實現 Function Factory ?

Conclusion

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Nginx Essentials

Nginx Essentials

Valery Kholodkov / Packt Publishing / 2015-7-1 / USD 34.99

About This Book Learn how to set up, configure, and operate an Nginx installation for day-to-day useExplore the vast features of Nginx to manage it like a pro, and use them successfully to run your......一起来看看 《Nginx Essentials》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具