思维方式

把现实世界的事物和事物之间的联系抽象到程序世界(对运算过程进行抽象)
程序的本质:根据输入通过某种运算获得相应的输出,程序开发过程中会涉及很多有输入和输出的函数;
函数式编程中的函数指的不是程序中的函数(方法),而是数学中的函数即映射关系,例如:y = sin(x),x和y的关系;
x -> f(联系、映射) -> y,y=f(x) ;
相同的输入始终要得到相同的输出;
函数式编程用来描述数据(函数)之间的映射;

基础认知

函数

函数是一等公民

函数可以存储在变量中
函数作为参数
函数作为返回值

高阶函数

定义

可以把函数作为参数传递给另一个函数
可以把函数作为另一个函数的返回结果

  • 函数作为参数 ```javascript // map const map = (array, fn) => { let results = [] / NOTE 新语法 for of 遍历一切可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等) / for (let value of array) { results.push(fn(value)) } return results }

// filter function filter (array, fn) { let results = [] for (let i = 0; i < array.length; i++) { if (fn(array[i])) { results.push(array[i]) } } return results }

  1. - 函数作为返回值
  2. ```javascript
  3. // 函数作为返回值
  4. function makeFn(){
  5. let msg = 'hello'
  6. return function(){
  7. console.log(msg)
  8. }
  9. }
  10. const fn = makeFn()
  11. fn()
  1. // once
  2. function once (fn) {
  3. let done = false
  4. return function () {
  5. if (!done) {
  6. done = true
  7. return fn.apply(this, arguments)
  8. }
  9. }
  10. }
  11. let pay = once(function (money) { console.log(`支付:${money} RMB`)})
  12. // 只会支付一次
  13. pay(5)
  14. pay(5)

意义

抽象可以帮我们屏蔽细节,只需要关注与我们的目标
高阶函数是用来抽象通用的问题

闭包

定义

函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。
可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员。

观察闭包

控制台观察调用栈、作用域
在控制台观察调用栈(Call Stack)的变化,作用域Scope的变化
Scope包括四个:

  1. 局部作用域Local:有当前执行的函数中的变量;
  2. 闭包Closure:有闭包中被保护的私有变量;
  3. 块级作用域Script:有let声明的变量等;
  4. 顶级作用域Global:有window,var声明的变量等;

    上面函数作为返回值的两个例子也存在闭包 ```javascript // 生成计算数字的多少次幂的函数 function makePower (power) { return function (x) { return Math.pow(x, power) } } let power2 = makePower(2) let power3 = makePower(3) console.log(power2(4)) console.log(power3(4))

// 第一个数是基本工资,第二个数是绩效工资 function makeSalary (x) { return function (y) { return x + y } } let salaryLevel1 = makeSalary(1500) let salaryLevel2 = makeSalary(2500) console.log(salaryLevel1(2000)) console.log(salaryLevel1(3000))

  1. <a name="feIMz"></a>
  2. #### 本质
  3. 函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除,但是 堆上的作用域成员因为被外部引用不能释放,因此内部函数依然可以访问外部函数的成员
  4. <a name="DbVA3"></a>
  5. ## 纯函数
  6. <a name="2lByi"></a>
  7. ### 概念
  8. 相同的输入永远会得到相同的输出,而且没有任何可观察的副作用。<br />纯函数就类似数学中的函数(用来描述输入和输出之间的关系),y = f(x)。<br />lodash 是一个纯函数的功能库,提供了对数组、数字、对象、字符串、函数等操作的一些方法
  9. <a name="Z7KIq"></a>
  10. ### 例
  11. 数组的 slice 和 splice 分别是:纯函数和不纯的函数<br />slice 返回数组中的指定部分,不会改变原数组splice 对数组进行操作返回该数组,会改变原数组
  12. ```javascript
  13. let numbers = [1, 2, 3, 4, 5]
  14. // 纯函数
  15. numbers.slice(0, 3)// => [1, 2, 3]
  16. numbers.slice(0, 3)// => [1, 2, 3]
  17. numbers.slice(0, 3) // => [1, 2, 3]
  18. // 不纯的函数
  19. numbers.splice(0, 3) // => [1, 2, 3]
  20. numbers.splice(0, 3) // => [4, 5]
  21. numbers.splice(0, 3) // => []

函数式编程不会保留计算中间的结果,所以变量是不可变的(无状态的)
我们可以把一个函数的执行结果交给另一个函数去处理

纯函数库lodash

  1. // 演示 lodash
  2. // first / last / toUpper / reverse / each / includes / find / findIndex
  3. const _ = require('lodash')
  4. const array = ['jack', 'tom', 'lucy', 'kate']
  5. console.log(_.first(array))
  6. console.log(_.last(array))
  7. console.log(_.toUpper(_.first(array)))
  8. console.log(_.reverse(array))
  9. /* NOTE 会改变原数组的函数(副作用)不是纯函数
  10. lodash中的fp(functional programming)模块中的方法才是纯函数;
  11. lodash的reverse方法内部就是调用的数组的reverse方法,
  12. 数组的reverse方法用法是[1,2].reverse(),没有输入,不符合纯函数的定义;
  13. 两个reverse都会改变原数组,有副作用,都不符合纯函数的定义;
  14. */
  15. const r = _.each(array, (item, index) => {
  16. console.log(item, index)
  17. })
  18. console.log(r)

优点

  • 可缓存:因为纯函数对相同的输入始终有相同的结果,所以可以把纯函数的结果缓存起来 ```javascript // 记忆函数 const _ = require(‘lodash’)

function getArea(r) { console.log(r) return Math.PI r r }

let getAreaWithMemory = _.memoize(getArea) console.log(getAreaWithMemory(4)) console.log(getAreaWithMemory(4)) console.log(getAreaWithMemory(4))

// 模拟 memoize 方法的实现 function memoize(f) { let cache = {} return function () { / NOTE 控制台浅色属性表示不可枚举 不可枚举的属性用for..in,JSON.stringfy,Object.keys遍历都无法找到 / let key = JSON.stringify(arguments) console.log(key)//{“0”:4}

  1. // WHY apply
  2. cache[key] = cache[key] || f.apply(f, arguments)
  3. console.log(cache)//{ '{"0":4}': 50.26548245743669 }
  4. return cache[key]

} }

let getAreaWithMemory = memoize(getArea) console.log(getAreaWithMemory(4)) console.log(getAreaWithMemory(4)) console.log(getAreaWithMemory(4))

  1. - 可测试:纯函数让测试更方便
  2. - 并行处理:在多线程环境下并行操作共享的内存数据很可能会出现意外情况 纯函数不需要访问共享的内存数据,所以在并行环境下可以任意运行纯函数 (Web Worker)
  3. <a name="iQJ7m"></a>
  4. ### 副作用
  5. ```javascript
  6. // 不纯的
  7. let mini = 18
  8. function checkAge (age) {
  9. return age >= mini
  10. }
  11. // 纯的(有硬编码,后续可以通过柯里化解决)
  12. function checkAge (age) {
  13. let mini = 18
  14. return age >= mini
  15. }

让一个函数变的不纯,纯函数的根据相同的输入返回相同的输出,如果函数依赖于外部的状态就无法保证输出相同,就会带来副作用。

来源

配置文件 数据库 获取用户的输入 ……

影响

副作用使方法通用性下降不适合扩展和可重用性,同时副作用会给程序中带来安全隐患给程序带来不确定性,但是副作用不可能完全禁止,尽可能控制它们在可控范围内发生。

柯里化

使用柯里化解决上一个案例中硬编码的问题

  1. function checkAge (age) {
  2. let min = 18
  3. return age >= min
  4. }
  5. // 普通纯函数
  6. function checkAge (min, age) {
  7. return age >= min
  8. }
  9. checkAge(18, 24)
  10. checkAge(18, 20)
  11. checkAge(20, 30)
  12. // 柯里化
  13. function checkAge (min) {
  14. return function (age) {
  15. return age >= min
  16. }
  17. }
  18. // ES6 写法
  19. let checkAge = min => (age => age >= min)
  20. let checkAge18 = checkAge(18)
  21. let checkAge20 = checkAge(20)
  22. checkAge18(24)
  23. checkAge18(20)

当一个函数有多个参数的时候先传递一部分参数调用它(这部分参数以后永远不变),然后返回一个新的函数接收剩余的参数,返回结果
柯里化的原理就是利用了闭包,缓存部分参数,返回一个新函数接收其余参数,返回结果。

lodash中的柯里化函数

_.curry(func)

  • 功能:创建一个函数,该函数接收一个或多个 func 的参数,如果 func 所需要的参数都被提 供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。
  • 参数:需要柯里化的函数
  • 返回值:柯里化后的函数
    ```javascript const _ = require(‘lodash’)

// 要柯里化的函数 function getSum (a, b, c) { return a + b + c }

// 柯里化后的函数 let curried = _.curry(getSum)

// 测试 curried(1, 2, 3) curried(1)(2)(3) curried(1, 2)(3)

  1. -
  2. ```javascript
  3. const _ = require('lodash')
  4. const match = _.curry(function (reg, str) {
  5. return str.match(reg)
  6. })
  7. const haveSpace = match(/\s+/g)
  8. const haveNumber = match(/\d+/g)
  9. console.log(haveSpace('hello world'))
  10. console.log(haveNumber('25$'))
  11. const filter = _.curry(function (func, array) {
  12. return array.filter(func)
  13. })
  14. console.log(filter(haveSpace, ['John Connor', 'John_Donne']))
  15. const findSpace = filter(haveSpace)
  16. console.log(findSpace(['John Connor', 'John_Donne']))

模拟实现

  1. function curry (func) {
  2. return function curriedFn (...args) {
  3. // 判断实参和形参的个数
  4. if (args.length < func.length) {
  5. /* NOTE 形参的个数
  6. 使用函数对象的 length 属性可以获取函数的形参个数。
  7. 该属性为只读属性,在函数体内、体外都可以使用。
  8. 在匿名函数中,使用 arguments.callee.length 获取函数形参的个数。
  9. callee 是 arguments 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数。
  10. 这在函数的名称是未知时很有用,例如在没有名称的函数表达式 (也称为“匿名函数”)内。
  11. 警告:在严格模式下,第5版 ECMAScript (ES5) 禁止使用 arguments.callee()。
  12. 当一个函数必须调用自身的时候, 避免使用 arguments.callee(), 通过要么给函数表达式一个名字,要么使用一个函数声明.
  13. */
  14. return function () {
  15. return curriedFn(...args.concat(Array.from(arguments)))
  16. }
  17. }
  18. // 实参和形参个数相同,调用 func,返回结果
  19. return func(...args)
  20. }
  21. }

意义

柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数,这是一种对函数参数的’缓存’,让函数变的更灵活,让函数的粒度更小,可以把多元函数转换成一元函数,可以组合使用函数产生强大的功能。

函数组合

背景

纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))
例如:获取数组的最后一个元素再转换成大写字母, .toUpper(.first(_.reverse(array)))
函数组合可以让我们把细粒度的函数重新组合生成一个新的函数
使用函数组合可以避免洋葱代码

下面这张图表示程序中使用函数处理数据的过程,给 fn 函数输入参数 a,返回结果 b。可以想想 a 数据 通过一个管道得到了 b 数据。
1612157737061.jpg
当 fn 函数比较复杂的时候,我们可以把函数 fn 拆分成多个小函数,此时多了中间运算过程产生的 m 和n。
下面这张图中可以想象成把 fn 这个管道拆分成了3个管道 f1, f2, f3,数据 a 通过管道 f3 得到结果 m,m再通过管道 f2 得到结果 n,n 通过管道 f1 得到最终结果 b
1612157754422.jpg

  1. fn = compose(f1,f2,f3)
  2. b = fn(a)

定义

如果一个函数要经过多个函数处理才能得到最终值,这个时候可以把中间过程的函数合并成一个函数
函数就像是数据的管道,函数组合就是把这些管道连接起来,让数据穿过多个管道形成最终结果
函数组合默认是从右到左执行

  1. // 组合函数
  2. function compose (f, g) {
  3. return function (x) {
  4. return f(g(x))
  5. }
  6. }
  7. function first (arr) {
  8. return arr[0]
  9. }
  10. function reverse (arr) {
  11. return arr.reverse()
  12. }
  13. // 从右到左运行
  14. let last = compose(first, reverse)
  15. console.log(last([1, 2, 3, 4]))

lodash 中的组合函数

lodash 中组合函数 flow() 或者 flowRight(),他们都可以组合多个函数

flow()

是从左到右运行

flowRight()

是从右到左运行,使用的更多一些

  1. const _ = require('lodash')
  2. const toUpper = s => s.toUpperCase()
  3. const reverse = arr => arr.reverse()
  4. const first = arr => arr[0]
  5. const f = _.flowRight(toUpper, first, reverse)
  6. console.log(f(['one', 'two', 'three']))

模拟实现 lodash 的 flowRight 方法

  1. function compose (...fns) {
  2. return function (value) {
  3. return fns.reverse().reduce(function (acc, fn) {
  4. return fn(acc)
  5. }, value)
  6. }
  7. }
  8. //es6
  9. const compose = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value)
  10. const reverse = arr => arr.reverse()
  11. const first = arr => arr[0]
  12. const toUpper = s => s.toUpperCase()
  13. const f = compose(toUpper, first, reverse)
  14. console.log(f(['one', 'two', 'three']))

结合律

函数的组合要满足结合律 (associativity):
我们既可以把 g 和 h 组合,还可以把 f 和 g 组合,结果都是一样的

  1. let f = compose(f, g, h)
  2. let associative = compose(compose(f, g), h) == compose(f, compose(g, h)) // true
  1. const _ = require('lodash')
  2. // const f = _.flowRight(_.toUpper, _.first, _.reverse)
  3. // const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
  4. const f = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))
  5. console.log(f(['one', 'two', 'three'])) // => THREE

如何调试组合函数

  1. // 函数组合 调试
  2. // NEVER SAY DIE --> never-say-die
  3. const _ = require('lodash')
  4. // const log = v => {
  5. // console.log(v)
  6. // return v
  7. // }
  8. const trace = _.curry((tag, v) => {
  9. console.log(tag, v)
  10. return v
  11. })
  12. const split = _.curry((sep, str) => _.split(str, sep))
  13. const join = _.curry((sep, array) => _.join(array, sep))
  14. const map = _.curry((fn, array) => _.map(array, fn))
  15. const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' '))
  16. console.log(f('NEVER SAY DIE'))

为何不直接组合.split(str, sep)、.join(array, sep)、_.map(array, fn)?
因为函数组合是把多个函数串联到一起,后面的函数依赖前面函数的返回值作为参数,串联时,需要先传入除这个参数之外的所有参数,组合后会得到一个通道函数,调用者调用这个通道函数,传入参数,得到最终结果。
所以函数组合的参数需要是一个柯里化后的只等待传入最后一个参数的函数。
但是每次这样进行函数组合会很麻烦,所以lodash提供了fp模块帮我们把方法群斗包装成了柯里化后的形式,可以直接组合,非常方便。

lodash中的fp模块

lodash 的 fp 模块提供了实用的对函数式编程友好的方法
提供了不可变 auto-curried自动柯里化 iteratee-first函数优先 data-last数据之后 的方法

  1. // lodash 的 fp 模块
  2. // NEVER SAY DIE --> never-say-die
  3. const fp = require('lodash/fp')
  4. const f = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))
  5. console.log(f('NEVER SAY DIE'))

lodash 和 lodash/fp 模块中 map 方法的区别

  1. // lodash 和 lodash/fp 模块中 map 方法的区别
  2. const _ = require('lodash')
  3. console.log(_.map(['23', '8', '10'], parseInt))
  4. // _.map会传递三个参数给parseInt:value index|key collection
  5. // parseInt('23', 0, array)//23
  6. // parseInt('8', 1, array)//NaN
  7. // parseInt('10', 2, array)//2
  8. const fp = require('lodash/fp')
  9. console.log(fp.map(parseInt, ['23', '8', '10']))//[ 23, 8, 10 ]
  10. // fp.map会传递一个参数给parseInt:value

Point Free

我们可以把数据处理的过程定义成与数据无关的合成运算,不需要用到代表数据的那个参数,只要把简单的运算步骤合成到一起,在使用这种模式之前我们需要定义一些辅助的基本运算函数。

  • 不需要指明处理的数据
  • 只需要合成运算过程
  • 需要定义一些辅助的基本运算函数 ```javascript // 非 Point Free 模式 // Hello World => helloworld function f (word) { return word.toLowerCase().replace(/\s+/g, ‘‘); }

// Point Free const fp = require(‘lodash/fp’) const f = fp.flowRight(fp.replace(/\s+/g, ‘_’), fp.toLower) console.log(f(‘Hello World’))

// 把一个字符串中的首字母提取并转换成大写, 使用. 作为分隔符 // world wild web ==> W. W. W const fp = require(‘lodash/fp’)

// const firstLetterToUpper = fp.flowRight(fp.join(‘. ‘), fp.map(fp.first), fp.map(fp.toUpper), fp.split(‘ ‘)) const firstLetterToUpper = fp.flowRight(fp.join(‘. ‘), fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(‘ ‘))

console.log(firstLetterToUpper(‘world wild web’))

  1. <a name="hnt1T"></a>
  2. ## 函子
  3. <a name="3gTVQ"></a>
  4. ### 背景
  5. 在函数式编程中,如何把副作用控制在可控的范围内?如何异常处理?怎么进行异步操作?<br />可以使用各种函子来解决。
  6. <a name="tT7zp"></a>
  7. ### 定义
  8. 容器:包含值和值的变形关系(这个变形关系就是函数)<br />函子:是一个特殊的容器,通过一个普通的对象来实现,该对象把传入的值存放在_value属性中,使用map 方法可以运行一个函数对值进行处理(变形关系),把处理后的结果放到_value属性中,然后返回_value是新值的函子的实例,实例可以继续调用map方法运行一个函数对新值进行处理,再次更新_value,依次往后。<br />函子就是一个实现了 map 契约的对象。
  9. <a name="obfaV"></a>
  10. ### Functor 函子
  11. ```javascript
  12. // 一个容器,包裹一个值
  13. class Container {
  14. // of 静态方法,可以省略 new 关键字创建对象
  15. static of(value) {
  16. return new Container(value)
  17. }
  18. constructor(value) {
  19. this._value = value
  20. }
  21. // map 方法,传入变形关系,将容器里的每一个值映射到另一个容器
  22. map(fn) {
  23. return Container.of(fn(this._value))
  24. }
  25. }
  26. // 测试
  27. Container.of(3)
  28. .map(x => x + 2)
  29. .map(x => x * x)
  30. ._value

函数式编程的运算不直接操作值,而是由函子完成。
我们可以把函子想象成一个盒子,这个盒子里封装了一个值。
想要处理盒子中的值,我们需要给盒子的 map 方法传递一个处理值的函数(纯函数),由这个函数来对值进行处理。
最终 map 方法返回一个包含新值的盒子(函子)。

在 Functor 中如果我们传入 null 或 undefined?

  1. // 值如果不小心传入了空值(副作用)
  2. Container.of(null)
  3. .map(x => x.toUpperCase())
  4. //TypeError:Cannot read property 'toUpperCase' of null

MayBe 函子

我们在编程的过程中可能会遇到很多错误,需要对这些错误做相应的处理
MayBe 函子的作用就是可以对外部的空值情况做处理(控制副作用在允许的范围)

  1. class MayBe {
  2. static of(value) {
  3. return new MayBe(value)
  4. }
  5. constructor(value) {
  6. this._value = value
  7. }
  8. // 如果对空值变形的话直接返回 值为 null 的函子
  9. map(fn) {
  10. return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
  11. }
  12. isNothing() {
  13. return this._value === null || this._value === undefined
  14. }
  15. }
  16. // 传入具体值
  17. MayBe.of('Hello World')
  18. .map(x => x.toUpperCase()) // 传入 null 的情况
  19. MayBe.of(null)
  20. .map(x => x.toUpperCase()) // => MayBe { _value: null }

在 MayBe 函子中,我们很难确认是哪一步产生的空值问题,如下例:

  1. MayBe.of('hello world')
  2. .map(x => x.toUpperCase())
  3. .map(x => null)
  4. .map(x => x.split(' '))
  5. // => MayBe { _value: null }

Either 函子

Either 两者中的任何一个,类似于 if…else…的处理
异常会让函数变的不纯,Either 函子可以用来做异常处理

  1. // Either 函子
  2. class Left {
  3. static of (value) {
  4. return new Left(value)
  5. }
  6. constructor (value) {
  7. this._value = value
  8. }
  9. map (fn) {
  10. return this
  11. }
  12. }
  13. class Right {
  14. static of (value) {
  15. return new Right(value)
  16. }
  17. constructor (value) {
  18. this._value = value
  19. }
  20. map (fn) {
  21. return Right.of(fn(this._value))
  22. }
  23. }
  24. // let r1 = Right.of(12).map(x => x + 2)
  25. // let r2 = Left.of(12).map(x => x + 2)
  26. // console.log(r1)
  27. // console.log(r2)
  28. function parseJSON (str) {
  29. try {
  30. return Right.of(JSON.parse(str))
  31. } catch (e) {
  32. return Left.of({ error: e.message })
  33. }
  34. }
  35. // let r = parseJSON('{ name: zs }')
  36. // console.log(r)
  37. let r = parseJSON('{ "name": "zs" }')
  38. .map(x => x.name.toUpperCase())
  39. console.log(r)

IO 函子

IO 函子中的 _value 是一个函数,这里是把函数作为值来处理。
IO 函子可以把不纯的动作存储到 _value 中,延迟执行这个不纯的操作(惰性执行),包装当前的操作纯,把不纯的操作交给调用者来处理。
其实就是使用函数组合把不纯的操作组合得到一个通道函数,让调用者自己去调用这个函数得到有副作用结果。

  1. Container.of(null)
  2. .map(x => x.toUpperCase())
  3. const fp = require('lodash/fp') class IO {
  4. static of(x) {
  5. return new IO(function () {
  6. return x
  7. })
  8. }
  9. constructor(fn) {
  10. this._value = fn
  11. }
  12. map(fn) {
  13. // 把当前的 value(非纯函数)和 传入的 fn(非纯函数) 组合成一个新的函数
  14. return new IO(fp.flowRight(fn, this._value))
  15. }
  16. }
  17. let io = IO.of(process)
  18. .map(p => p.execPath)
  19. console.log(io._value())//IO 函子的_value是个组合后的通道函数,传入参数执行即可拿到有副作用的结果

Task 函子

Task 函子可以用来处理异步任务。
异步任务的实现过于复杂,我们使用 folktale 中的 Task 来演示。
folktale 是一个标准的函数式编程库。和 lodash、ramda 不同的是,他没有提供很多功能函数,只提供了一些函数式处理的操作,例如:compose、curry 等,一些函子 Task、Either、 MayBe等。

  1. // folktale
  2. const { compose, curry } = require('folktale/core/lambda')
  3. const { toUpper, first } = require('lodash/fp')
  4. // 第一个参数是传入函数的参数个数
  5. let f = curry(2, function (x, y) { console.log(x + y) })
  6. f(3, 4)
  7. f(3)(4)
  8. // 函数组合
  9. let f = compose(toUpper, first)
  10. f(['one', 'two'])
  11. // Task 函子
  12. const { task } = require('folktale/concurrency/task')
  13. function readFile(filename) {
  14. return task(resolver => {
  15. fs.readFile(filename, 'utf-8', (err, data) => {
  16. if (err) resolver.reject(err)
  17. resolver.resolve(data)
  18. })
  19. })
  20. }
  21. // 调用 run 执行
  22. readFile('package.json')
  23. .map(split('\n'))// 这个函子的map方法会拿到读取后的结果
  24. .map(find(x => x.includes('version')))// 这个函子的map方法会拿到变更后的结果
  25. .run()
  26. .listen({
  27. onRejected: err => { console.log(err) },
  28. onResolved: value => { console.log(value) }
  29. })

Pointed 函子

Pointed 函子是实现了 of 静态方法的函子
of 方法是为了避免使用 new 来创建对象,更深层的含义是 of 方法用来把值放到上下文 Context(把值放到容器中,使用 map 来处理值)

  1. class Container {
  2. static of(value) {
  3. return new Container(value)
  4. }
  5. ......
  6. }
  7. Contanier.of(2)
  8. .map(x => x + 5)

Monad 单子

背景

在使用 IO 函子的时候,很容易写出洋葱代码IO(IO(x)):

  1. // IO 函子的问题
  2. const fs = require('fs')
  3. const fp = require('lodash/fp')
  4. class IO {
  5. static of(value) {
  6. return new IO(function () {
  7. return value
  8. })
  9. }
  10. constructor(fn) {
  11. this._value = fn
  12. }
  13. map(fn) {
  14. return new IO(fp.flowRight(fn, this._value))
  15. }
  16. }
  17. let readFile = function (filename) {
  18. return new IO(function () {
  19. return fs.readFileSync(filename, 'utf-8')
  20. })
  21. }
  22. let print = function (x) {
  23. return new IO(function () {
  24. console.log(x)
  25. return x
  26. })
  27. }
  28. let cat = fp.flowRight(print, readFile)
  29. // IO(IO(x))
  30. let r = cat('package.json')._value()._value()
  31. console.log(r)
  32. // NOTE fs模块读取文件的相对路径是以启动node的位置为基准的

函数嵌套的洋葱式代码可以使用函数组合解决;函子嵌套的洋葱式代码可以使用Monad单子解决;
Monad 函子是可以变扁的 Pointed 函子,IO(IO(x))
一个函子如果具有 join 和 of 两个方法并遵守一些定律就是一个 Monad

  1. // IO Monad
  2. const fs = require('fs')
  3. const fp = require('lodash/fp')
  4. class IO {
  5. static of(value) {
  6. return new IO(function () {
  7. return value
  8. })
  9. }
  10. constructor(fn) {
  11. this._value = fn
  12. }
  13. map(fn) {
  14. return new IO(fp.flowRight(fn, this._value))
  15. }
  16. join() {
  17. return this._value()
  18. }
  19. flatMap(fn) {
  20. return this.map(fn).join()
  21. }
  22. }
  23. let readFile = function (filename) {
  24. return new IO(function () {
  25. return fs.readFileSync(filename, 'utf-8')
  26. })
  27. }
  28. let print = function (x) {
  29. return new IO(function () {
  30. console.log(x)
  31. return x
  32. })
  33. }
  34. let r = readFile('package.json')
  35. // .map(x => x.toUpperCase())
  36. .map(fp.toUpper)
  37. .flatMap(print)
  38. .join()
  39. console.log(r)
  40. /* 执行过程分析 */
  41. // 1
  42. readFile('package.json')
  43. // 结果
  44. this._value = function () {
  45. return fs.readFileSync('package.json', 'utf-8')
  46. }
  47. // 2
  48. .map(fp.toUpper)
  49. // 结果
  50. this._value = fp.flowRight(fp.toUpper, function () {
  51. return fs.readFileSync('package.json', 'utf-8')
  52. })
  53. // 3
  54. .flatMap(print)
  55. // 过程
  56. this.map(print).join()
  57. new IO(fp.flowRight(print, fp.flowRight(fp.toUpper, function () {
  58. return fs.readFileSync('package.json', 'utf-8')
  59. })).join()
  60. // 结果
  61. fp.flowRight(print, fp.flowRight(fp.toUpper, function () {
  62. return fs.readFileSync('package.json', 'utf-8')
  63. })()
  64. // 4
  65. .join()
  66. // 结果
  67. fp.flowRight(print, fp.flowRight(fp.toUpper, function () {
  68. return fs.readFileSync('package.json', 'utf-8')
  69. })()() // 大写的文件内容
  70. let r = 大写的文件内容

优点

  • 函数式编程可以抛弃 this
  • 打包过程中可以更好的利用 tree shaking 过滤无用代码
  • 方便测试、方便并行处理

    函数式开发的库

    有很多库可以帮助我们进行函数式开发:lodash、underscore、ramda