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

时间:2021-1-8 作者:admin

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

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

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

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

 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实例化的对象来监听原对象就显得很安全,不直接对原始数据操作是一个很重要的编程思路,以上。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。