javascript函子的详细解析与发展

函子的详细解析与发展历程

最近在拉钩大前端高薪训练营学习，学到了很多从前不知道的知识，自己体会到了很多编程理念和学习编程的方法，感谢翠翠老师、班班还有指导老师

以下是我在学习函子时的一个总结

想要对字符串进行处理，比如都变成大写字符，并且返回新的字符串

 let str = "la gou jiao yu"
 let UpperStr = str.toUpperCase()
 console.log(UpperStr)

很简单，通过toUpperCase方法就可以很容易的实现，但是这种方法是对str进行直接操作的，，于是我们可以通过一个容器把他包裹起来，通过操作这个容器，来间接的实现对数据的操作，我们来操作函子，让函子操作字符串本身，从而实现间接的操作字符串，这样我们就可以专注于方法上，不用管他本身是啥

那么这个容器，其实就是函子

基础函子，也就是最原始的容器

class Container {
    
    
  constructor (value) {
    
    
    this._value = value
  }
  map (fn) {
    
    
    return new Container(fn(this._value))
  }
}
let r = new Container(str).map( x => x.toUpperCase())
console.log(r)

这样我们就可以通过函子来简介的操作字符串，从而在安全性上有了很大的提升

接下来我们来完善这个函子，我们每次调用的时候，都要 new 一下很不方便，所以我们来通过一个 of 方法来优化这个函子

基础函子优化

class Container {
    
    
  static of (value) {
    
    
    return new Container(value)
  }
 // 这样一来在函子内部就可以完成 new 的操作 ，不用每一次都new一个新的函子对象出来
  constructor (value) {
    
    
    this._value = value
  }

  map (fn) {
    
    
    return Container.of(fn(this._value))
  }
}
let str = "la gou jiao yu"


let r = Container.of(str).map( x => x.toUpperCase())
console.log(r)

在这个过程中，还可以进行链式的调用，来实现对字符串的连续处理

let r = Container.of(str)
.map( x => x.toUpperCase())
.map(x => x.slice(0,6))
.map(x => x.toLowerCase())
console.log(r)

但是很多情况下，函数的调用并不是一帆风顺的，很有可能出现传递的值为空的情况

MayBe函子

所以我们要判断传递的值是否为空，从而有了MayBe 函子maybe就是可能的意思，也就是说这个函子在处理可能出现的空置情况

// MayBe 函子
class MayBe {
    
    
  static of (value) {
    
    
    return new MayBe(value)
  }

  constructor (value) {
    
    
    this._value = value
  }

  map (fn) {
    
    
    return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
  }

  isNothing () {
    
    
    return this._value === null || this._value === undefined
  }
}

我们从在一个函子的基础上进行优化，把名字改为Maybe,就是Maybe函子了

let r = MayBe.of(null)
.map( x => x.toUpperCase())
.map(x =>x.slice(0,6))
.map(x => x.toLowerCase())
console.log(r)
// 现在我们的函子拥有了处理空值的能力

输出：

either函子

但是我们在调用的过程中很希望知道在调用的哪一步出现了问题，所以有了Either函子

either在英文中的含义就是两者中的任何一个，要么…要么…,不是…就是…

所以either函子由两个部分构成

class Left {
    
    
  static of (value) {
    
    
    return new Left(value)
  }

  constructor (value) {
    
    
    this._value = value
  }

  map (fn) {
    
    
    return this
  }
}

class Right {
    
    
  static of (value) {
    
    
    return new Right(value)
  }

  constructor (value) {
    
    
    this._value = value
  }

  map (fn) {
    
    
    return Right.of(fn(this._value))
  }
}

后来我自己为了更好的理解，让either看起更像函子一点

let Either = {
    
    Left ,Right} 
// 我把这两个方法存到了一个Either对象里

function parseJSON (str) {
    
    
  try {
    
    
    return Either.Left.of(JSON.parse(str))
  } catch (e) {
    
    
    return Either.Right.of({
    
     error: e.message })
  }
}
let r = parseJSON('{ "name": "zs" }')
          .map(x => x.name.toUpperCase())
console.log(r)

这样一来通过调用Either对象里的不同方法，实现要么左要么右的效果

IO函子

函子发展到这里，既然数据可以处理，那么方法、函数是不是也要能够处理呢，

所以有了IO函子，用来间接的处理函数动作

// IO 函子
const fp = require('lodash/fp')
// 引入函数式编程的库lodash
class IO {
    
    
  static of (value) {
    
    
    return new IO(function () {
    
    
      return value
    })
  }

  constructor (fn) {
    
    
    this._value = fn
  }

  map (fn) {
    
    
    return new IO(fp.flowRight(fn, this._value))
      //函数组合
  }
}

// 调用
let r = IO.of(process).map(p => p.execPath)
// console.log(r)
console.log(r._value())

Monad函子

既然是函数调用，那么就存在某些嵌套的关系,例如如下代码，就出现了IO(IO(x))的现象，函子中调用函子，这样是很不简洁的

// IO 函子的问题
const fs = require('fs')
const fp = require('lodash/fp')

class IO {
    
    
  static of (value) {
    
    
    return new IO(function () {
    
    
      return value
    })
  }

  constructor (fn) {
    
    
    this._value = fn
  }

  map (fn) {
    
    
    return new IO(fp.flowRight(fn, this._value))
  }
}

let readFile = function (filename) {
    
    
  return new IO(function () {
    
    
    return fs.readFileSync(filename, 'utf-8')
  })
}

let print = function (x) {
    
    
  return new IO(function () {
    
    
    console.log(x)
    return x
  })
}

let cat = fp.flowRight(print, readFile)
// IO(IO(x))
let r = cat('package.json')._value()._value()
console.log(r)

为了解决这一个问题，引入了Monad函子，monad在英文中就是单子的意思，还有不可分割的实体的含义，所以产生了Monad函子来解决上述IO函子的问题，实现扁平化

// IO Monad
const fs = require('fs')
const fp = require('lodash/fp')

class IO {
    
    
  static of (value) {
    
    
    return new IO(function () {
    
    
      return value
    })
  }

  constructor (fn) {
    
    
    this._value = fn
  }

  map (fn) {
    
    
    return new IO(fp.flowRight(fn, this._value))
  }

  join () {
    
    
    return this._value()
  }

  flatMap (fn) {
    
    
    return this.map(fn).join()
  }
}

let readFile = function (filename) {
    
    
  return new IO(function () {
    
    
    return fs.readFileSync(filename, 'utf-8')
  })
}

let print = function (x) {
    
    
  return new IO(function () {
    
    
    console.log(x)
    return x
  })
}

let r = readFile('package.json')
          // .map(x => x.toUpperCase())
          .map(fp.toUpper)
          .flatMap(print)
          .join()

console.log(r)

解决了扁平化的问题之后，对于函数来说，有一个最重要的问题就是异步的问题，那么又产生了Task函子来处理异步的问题

// Task 处理异步任务
const fs = require('fs')
const {
    
     task } = require('folktale/concurrency/task')
const {
    
     split, find } = require('lodash/fp')

function readFile (filename) {
    
    
  return task(resolver => {
    
    
    fs.readFile(filename, 'utf-8', (err, data) => {
    
    
      if (err) resolver.reject(err)

      resolver.resolve(data)
    })
  })
}

readFile('package.json')
  .map(split('\n'))
  .map(find(x => x.includes('version')))
  .run()
  .listen({
    
    
    onRejected: err => {
    
    
      console.log(err)
    },
    onResolved: value => {
    
    
      console.log(value)
    }
  })

到这里函子就介绍完了，其实函子的思路很简单，就是为了间接的操作数据和函数，所以把他们包装进一个容器，然后这个容器就是函子

为了满足不同的需求，所以衍生出了各种各样的函子，所以有的时候学习编程重点在于弄清楚底层出现了什么问题，应该怎么解决，其实所有的新的技术都是在不断优化，改进，解决一些底层的问题。

ap(find(x => x.includes('version')))
  .run()
  .listen({
    
    
    onRejected: err => {
    
    
      console.log(err)
    },
    onResolved: value => {
    
    
      console.log(value)
    }
  })

到这里函子就介绍完了，其实函子的思路很简单，就是为了间接的操作数据和函数，所以把他们包装进一个容器，然后这个容器就是函子

为了满足不同的需求，所以衍生出了各种各样的函子，所以有的时候学习编程重点在于弄清楚底层出现了什么问题，应该怎么解决，其实所有的新的技术都是在不断优化，改进，解决一些底层的问题。

其次这种间接操作的思想也很值得学习，这种方法不会侵入原对象，非常的安全，在vue的双向数据绑定的原理中就是使用了Object.defineProperty来对 对象进行监听和操作，但是引入proxy之后，通过监听proxy实例化的对象来监听原对象就显得很安全，不直接对原始数据操作是一个很重要的编程思路，以上。