如何實現 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

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

查看所有标签

猜你喜欢:

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

数据结构与算法分析(C++版)(第3版)

数据结构与算法分析(C++版)(第3版)

Clifford A. Shaffer / 张铭、刘晓丹、等译 / 电子工业出版社 / 2013 / 59.00元

本书采用当前流行的面向对象的C++程序设计语言来描述数据结构和算法, 因为C++语言是程序员最广泛使用的语言。因此, 程序员可以把本书中的许多算法直接应用于将来的实际项目中。尽管数据结构和算法在设计本质上还是很底层的东西, 并不像大型软件工程项目开发那样, 对面向对象方法具有直接的依赖性, 因此有人会认为并不需要采用高层次的面向对象技术来描述底层算法。 但是采用C++语言能更好地体现抽象数据类型的......一起来看看 《数据结构与算法分析(C++版)(第3版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具