技術標籤：JavaScript世界javascripttypescript前端node.js

函子的詳細解析與發展歷程

最近在拉鉤大前端高薪訓練營學習，學到了很多從前不知道的知識，自己體會到了很多程式設計理念和學習程式設計的方法，感謝班班和指導老師

以下是我在學習函子時的一個總結

想要對字串進行處理，比如都變成大寫字元，並且返回新的字串

 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例項化的物件來監聽原物件就顯得很安全，不直接對原始資料操作是一個很重要的程式設計思路，以上。