函子的詳細決議與發展歷程
最近在拉鉤大前端高薪訓練營學習，學到了很多從前不知道的知識，自己體會到了很多編程理念和學習編程的方法，感謝班班和指導老師
以下是我在學習函子時的一個總結
想要對字串進行處理，比如都變成大寫字符，并且回傳新的字串
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實體化的物件來監聽原物件就顯得很安全，不直接對原始資料操作是一個很重要的編程思路，以上，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246183.html
標籤：其他
上一篇：關于回圈輸出值問題