摘要：組合組合的功能非常強大，也是函數式編程的一個核心概念，所謂的對過程進行封裝很大程度上就是依賴于組合。在理解之前，先認識一個東西概念容器容器為函數式編程里普通的變量對象函數提供了一層極其強大的外衣，賦予了它們一些很驚艷的特性。

JavaScript是一門多范式語言，即可使用OOP（面向對象），也可以使用FP（函數式），由于筆者最近在學習React相關的技術棧，想進一步深入了解其思想，所以學習了一些FP相關的知識點，本文純屬個人的讀書筆記，如果有錯誤，望輕噴且提點。

函數式編程（英語：functional programming）或稱函數程序設計、泛函編程，是一種編程范式，它將計算機運算視為函數運算，并且避免使用程序狀態以及易變對象。即對過程進行抽象，將數據以輸入輸出流的方式封裝進過程內部，從而也降低系統的耦合度。

Js支持FP的一個重要原因在于，在JS中，函數是一等公民。即你可以像對其他數據類型一樣對其進行操作，把他們存在數組里，當作參數傳遞，賦值給變量...等等。如下：

const func = () => {}

// 存儲
const a = [func]

// 參數 返回值
const x = (func) => {
    ......
    ......
    return func
}

x(func)

這個特性在編寫語言程序時帶來了極大的便利，下面的知識及例子都建立在此基礎上。

純函數是這樣一種函數，即相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用。
副作用包括但不限于：

打印/log

發送一個http請求

可變數據

DOM查詢

簡單一句話， 即只要是與函數外部環境發生交互的都是副作用。

像Js中， slice就是純函數， 而splice則不是

var xs = [1,2,3,4,5];

// 純的
xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]


// 不純的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

在React生態中，使用純函數的例子很常見，如React Redner函數，Redux的reducer，Redux-saga的聲明式effects等等。

React Render
在React中，Render返回了一個JSX表達式，只要輸入相同，即可以保證我們拿到同樣的輸出（最終結果渲染到DOM上），而內部的封裝細節我們不需要關心，只要知道它是沒有副作用的，這在我們開發過程中帶來了極大的便利。當我們的程序出問題時（渲染出來與預期不符合），我們只要關心我們的入參是否有問題即可。

class Component extends React.Component {
    render() {
        return (
            

        )
    }
}

Redux的reducer
Redux的reducer函數要求我們每一次都要返回一個新的state, 并且在其中不能有任何副作用，只要傳入參數相同，返回計算得到的下一個 state 就一定相同。沒有特殊情況、沒有副作用，沒有 API 請求、沒有變量修改，單純執行計算。這樣做可以使得我們很容易的保存了每一次state改變的情況，對于時間旅行這種需求更是天然的親近。特別是在調試的過程中，我們可以借助插件，任意達到每一個state狀態，能夠輕松的捕捉到錯誤是在哪一個節點出現。

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

Redux-sage的聲明式effects
許多時候， 我們會寫這樣的函數

const sendRequest = () => {
    return axions.post(...)
}

這是一個不純的函數，因為它包含了副作用，發起了http請求，我們可以這樣封裝一下：

const sendRequestReducer = () => {
    return () => {
        return axios.post(...)
    }
}

ok, 現在是一個純函數了，正如Redux-saga中的effects一樣：

import { call } from "redux-saga/effects"

function* fetchProducts() {
  const products = yield call(Api.fetch, "/products")
  // ...
}

實際上call不立即執行異步調用，相反，call 創建了一條描述結果的信息。那么這樣做除了增加代碼的復雜度，還可以給我們帶來什么？參考saga的官方文檔就知道了， 答案是測試：

這些 聲明式調用（declarative calls） 的優勢是，我們可以通過簡單地遍歷 Generator 并在 yield 后的成功的值上面做一個 deepEqual 測試， 就能測試 Saga 中所有的邏輯。這是一個真正的好處，因為復雜的異步操作都不再是黑盒，你可以詳細地測試操作邏輯，不管它有多么復雜。

import { call } from "redux-saga/effects"
import Api from "..."

const iterator = fetchProducts()

// expects a call instruction
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, "/products"),
  "fetchProducts should yield an Effect call(Api.fetch, "./products")"
)

純函數有著以下的優點

可緩存性
首先，純函數總能夠根據輸入來做緩存。實現緩存的一種典型方式是 memoize 技術：

var memoize = function(f) {
  var cache = {};

  return function() {
    var arg_str = JSON.stringify(arguments);
    cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
    return cache[arg_str];
  };
};

var squareNumber  = memoize(function(x){ return x*x; });

squareNumber(4);
//=> 16

squareNumber(4); // 從緩存中讀取輸入值為 4 的結果
//=> 16

squareNumber(5);
//=> 25

squareNumber(5); // 從緩存中讀取輸入值為 5 的結果
//=> 25

可移植性
純函數因為不依賴外部環境，所以非常便于移植，你可以在任何地方使用它而不需要附帶著引入其他不需要的屬性。

可測試性
如上面提到的Redux reducer和Redux-saga一樣， 它對于測試天然親近。

并行代碼
我們可以并行運行任意純函數。因為純函數根本不需要訪問共享的內存，而且根據其定義，純函數也不會因副作用而進入競爭態（race condition）。

在計算機科學中，柯里化（英語：Currying），又譯為卡瑞化或加里化，是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，并且返回接受余下的參數而且返回結果的新函數的技術。

var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var increment = add(1);
var addTen = add(10);

increment(2);
// 3

addTen(2);
// 12

在Lodash類庫中，就有這么一個curry函數來幫助我們處理科里化，關于如何實現一個curry函數，推薦大家參考這篇文章

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
curried(1)(2)(3);
// => [1, 2, 3]
 
curried(1, 2)(3);
// => [1, 2, 3]
 
curried(1, 2, 3);
// => [1, 2, 3]
 
// Curried with placeholders.
curried(1)(_, 3)(2);
// => [1, 2, 3]

偏函數本身與科里化并不相關， 但在日常的編寫程序中，或許我們使用更多的是偏函數，所以在這里簡單的介紹一下偏函數

偏函數應用是找一個函數，固定其中的幾個參數值，從而得到一個新的函數。

有時候，我們會寫一個專門發送http請求的函數

const sendRequest = (host, fixPath, path) => {
    axios.post(`${host}${fixPath}{path}`)
}

但是大多數時候， host和fixPath是固定的， 我們不想每次都寫一次host和fixPath，但我們又不能寫死，因為我們需要sendRequest這個函數是可以移植的，不受環境的約束，那么我們可以這樣

const sendRequestPart = (path) => {
    const host = "..."
    const fixPath = "..."
    return sendRequest(host, fixPath, path)
}

科里化和偏函數的主要用途是在組合中，這一小節主要介紹了他們的使用方法和行為。

組合的功能非常強大， 也是函數式編程的一個核心概念， 所謂的對過程進行封裝很大程度上就是依賴于組合。那么什么是組合？

var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + "!"; };
var shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

上面的compose就是一個最簡單的組合函數， 當然組合函數并不限制于傳入多少個函數參數，它最后只返回一個函數，我個人更喜歡將它認為像管道一樣，將數據經過不同函數的逐漸加工，最后得到我們想要的結果

const testFunc = compose(func1, func2, func3, func4)  
testFunc(...args) 

在js中， 實現compose函數比較容易

const compose = (...fns) => {
    return (...args) => {
        let res = args
        for (let i = fns.length - 1; i > -1; i--) {
            res = fns[i](res)
        }
        return res
    }
}

React官方推崇組合優于繼承這個概念，這里選擇兩個比較典型的例子來看

React中的高階組件
在React中，有許多使用高階組件的地方，如React-router的withRouter函數，React-redux的connect函數返回的函數，

// Navbar 和 Comment都是組件
const NavbarWithRouter = withRouter(Navbar);
const ConnectedComment = connect(commentSelector, commentActions)(Comment);

而由于高階函數的簽名是Component => Component。所以我們可以很容易的將他們組合到一起，這也是官方推薦的做法

// 不要這樣做……
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ……你可以使用一個函數組合工具
// compose(f, g, h) 和 (...args) => f(g(h(...args)))是一樣的
const enhance = compose(
  // 這些都是多帶帶一個參數的高階組件
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

Redux的compose函數
Redux的compose函數實現要比上面提到的簡潔的多

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

這個實現咋看之下有點懵逼， 所以可以拆開來看一下

composeFn = compose(fn1, fn2, fn3, fn4)

那么reduce循環運行時， 第一次a就是fn1, b是fn2, 第二次a是(...args) => fn1(fn2(...args)), b是fn3, 第三次運行的時候則是a是(...args) => fn1(fn2(fn3(...args))), b是fn4， 最后返回了fn1(fn2(fn3(fn4(...args))))

它的意思是說，函數無須提及將要操作的數據是什么樣的。

// 非 pointfree，因為提到了數據：word
var snakeCase = function (word) {
  return word.toLowerCase().replace(/s+/ig, "_");
};

// pointfree
var snakeCase = compose(replace(/s+/ig, "_"), toLowerCase);

pointfree 模式能夠幫助我們減少不必要的命名，讓代碼保持簡潔和通用。對函數式代碼來說，pointfree 是非常好的石蕊試驗，因為它能告訴我們一個函數是否是接受輸入返回輸出的小函數。比如，while 循環是不能組合的。不過你也要警惕，pointfree 就像是一把雙刃劍，有時候也能混淆視聽。并非所有的函數式代碼都是 pointfree 的，不過這沒關系。可以使用它的時候就使用，不能使用的時候就用普通函數。

有了組合， 配合上面提到的科里化和偏函數應用， 可以將程序拆成一個個小函數然后組合起來， 優點已經很明顯的呈現出來，也很直觀的表達出了函數式編程的封裝過程的核心概念。

函數式編程建立在范疇學上，很多時候討論起來難免有點理論化，所以這里簡單的介紹一下范疇。

有著以下這些組件（component）的搜集（collection）就構成了一個范疇：

對象的搜集

態射的搜集

態射的組合

identity 這個獨特的態射

對象的搜集
對象就是數據類型，例如 String、Boolean、Number 和 Object 等等。通常我們把數據類型視作所有可能的值的一個集合（set）。像 Boolean 就可以看作是 [true, false] 的集合，Number 可以是所有實數的一個集合。把類型當作集合對待是有好處的，因為我們可以利用集合論（set theory）處理類型。

態射的搜集
態射是標準的、普通的純函數。

態射的組合
即上面提到的compose

identity 這個獨特的態射
讓我們介紹一個名為 id 的實用函數。這個函數接受隨便什么輸入然后原封不動地返回它：

var id = function(x){ return x; };

在學習函數式編程的時候，第一次看到functor的時候一臉懵逼， 確實不理解這個東西是什么， 可以做什么，加上一堆術語，頭都大了。在理解functor之前，先認識一個東西

容器

容器為函數式編程里普通的變量、對象、函數提供了一層極其強大的外衣，賦予了它們一些很驚艷的特性。

var Container = function(x) {
  this.__value = x;
}
Container.of = x => new Container(x);

//試試看
Container.of(1);
//=> Container(1)

Container.of("abcd");
//=> Container("abcd")

Container.of 把東西裝進容器里之后，由于這一層外殼的阻擋，普通的函數就對他們不再起作用了，所以我們需要加一個接口來讓外部的函數也能作用到容器里面的值（像Array也是一個容器）：

Container.prototype.fmap = function(f){
  return Container.of(f(this.__value))
}

我們可以這樣使用它：

Container.of(3)
    .fmap(x => x + 1)                //=> Container(4)
    .fmap(x => "Result is " + x);    //=> Container("Result is 4")

我們通過簡單的代碼就實現了一個鏈式調用，并且這也是一個functor。

Functor（函子）是實現了 fmap 并遵守一些特定規則的容器類型。

這樣子看還是有點不好理解， 那么參考下面這句話可能會好一點：

a functor is nothing more than a data structure you can map functions over with the purpose of lifting values from a container, modifying them, and then putting them back into a container.   都是些簡單的單詞，意會比起本人翻譯會更容易理解。

加上一張圖：

ok, 現在大概知道functor是一個什么樣的東西了。

那么functor有什么作用呢？

鏈式調用
首先它可以鏈式調用，正如上面提到的一樣。

Immutable
可以看到， 我們每次都是返回了一個新的Container.of， 所以數據是Immutable的， 而Immutable的作用就不在這里贅述了。

將控制權交給Container
將控制權交給Container， 這樣他就可以決定何時何地怎么去調用我們傳給fmap的function，這個作用非常強大，可以為我們做空值判斷、異步處理、惰性求值等一系列麻煩的事。

上面作用的第三點可能直觀上有點難以理解， 下面舉三個簡單的例子

Maybe Container
定義一個Maybe Container來幫我們處理空值的判斷

var Maybe = function(x) {
  this.__value = x;
}

Maybe.of = function(x) {
  return new Maybe(x);
}

Maybe.prototype.fmap = function(f) {
  return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
}

Maybe.prototype.isNothing = function() {
  return (this.__value === null || this.__value === undefined);
}

//試試看
import _ from "lodash";
var add = _.curry(_.add);

Maybe.of({name: "Stark"})
    .fmap(_.prop("age"))
    .fmap(add(10));
//=> Maybe(null)

Maybe.of({name: "Stark", age: 21})
    .fmap(_.prop("age"))
    .fmap(add(10));
//=> Maybe(31)

當然， 這里可以利用上面提到的科里化函數來簡化掉一堆fmap的情況

import _ from "lodash";
var compose = _.flowRight;
var add = _.curry(_.add);

// 創造一個柯里化的 map
var map = _.curry((f, functor) => functor.fmap(f));

var doEverything = map(compose(add(10), _.property("age")));

var functor = Maybe.of({name: "Stark", age: 21});
doEverything(functor);
//=> Maybe(31)

Task Container
我們可以編寫一個Task Container來幫我們處理異步的情況

var fs = require("fs");

//  readFile :: String -> Task(Error, JSON)
var readFile = function(filename) {
  return new Task(function(reject, result) {
    fs.readFile(filename, "utf-8", function(err, data) {
      err ? reject(err) : result(data);
    });
  });
};

readFile("metamorphosis").fmap(split("
")).fmap(head);

例子中的 reject 和 result 函數分別是失敗和成功的回調。正如你看到的，我們只是簡單地調用 Task 的 map 函數，就能操作將來的值，好像這個值就在那兒似的。(這看起來有點像Promise)

Io Container
我們可以利用Io Container來做惰性求值

import _ from "lodash";
var compose = _.flowRight;

var IO = function(f) {
    this.__value = f;
}

IO.of = x => new IO(_ => x);

IO.prototype.map = function(f) {
    return new IO(compose(f, this.__value))
};

var io_document = new IO(_ => window.document);

io_document.map(function(doc){ return doc.title });
//=> IO(document.title)

注意我們這里雖然感覺上返回了一個實際的值 IO(document.title)，但事實上只是一個對象：{ __value: [Function] }，它并沒有執行，而是簡單地把我們想要的操作存了起來，只有當我們在真的需要這個值得時候，IO 才會真的開始求值，

functor 的概念來自于范疇學，并滿足一些定律。 即functor 接受一個范疇的對象和態射（morphism），然后把它們映射（map）到另一個范疇里去。

Js中也有一些實現了functor, 如map、filter

map    :: (A -> B)   -> Array(A) -> Array(B)
filter :: (A -> Boolean) -> Array(A) -> Array(A)

我們來寫一個函數 cat，這個函數的作用和 Linux 命令行下的 cat 一樣，讀取一個文件，然后打出這個文件的內容

import fs from "fs";
import _ from "lodash";

var map = _.curry((f, x) => x.map(f));
var compose = _.flowRight;

var readFile = function(filename) {
    return new IO(_ => fs.readFileSync(filename, "utf-8"));
};

var print = function(x) {
    return new IO(_ => {
        console.log(x);
        return x;
    });
}

var cat = compose(map(print), readFile);

cat("file")
//=> IO(IO("file的內容"))

ok, 我們最后得到的是兩層嵌套的IO, 要獲取其中的值

cat("file").__value().__value()

問題很明顯的出來了， 我們需要連續調用兩次_value才能獲取， 那么假如我們嵌套了更多呢， 難道每次都要調用一大堆__value嗎， 那當然是不可能的。

我們可以使用一個join函數， 來將Container里面的東西拿出來， 像這樣

var join = x => x.join();
IO.prototype.join = function() {
  return this.__value ? IO.of(null) : this.__value();
}

// 試試看
var foo = IO.of(IO.of("123"));

foo.join();

似乎這樣也有點麻煩， 每次都要使用一個join來剖析

var doSomething = compose(join, map(f), join, map(g), join, map(h));

我們可以使用一個chain函數， 來幫助我們做這些事

var chain = _.curry((f, functor) => functor.chain(f));
IO.prototype.chain = function(f) {
  return this.map(f).join();
}

// 現在可以這樣調用了
var doSomething = compose(chain(f), chain(g), chain(h));

// 當然，也可以這樣
someMonad.chain(f).chain(g).chain(h)

// 寫成這樣是不是很熟悉呢？
readFile("file")
    .chain(x => new IO(_ => {
        console.log(x);
        return x;
    }))
    .chain(x => new IO(_ => {
        // 對x做一些事情，然后返回
    }))

ok, 事實上這就是一個Monad， 而且你也會很熟悉， 這就像一個Promise的then， 那么什么是Monad呢？
Monad有一個bind方法， 就是上面講到的chain（同一個東西不同叫法），

function bind(instance: M, transform: (value: T) => M): M {
    // ...
}

// 這樣是行不通的，因為 2 和 3 都藏在瓶子里。
add(Container.of(2), Container.of(3));
//NaN

// 使用可靠的 map 函數試試
var container_of_add_2 = map(add, Container.of(2));
// Container(add(2))

Container.of(2).chain(function(two) {
  return Container.of(3).map(add(two));
});

Container.prototype.ap = function(other_container) {
  return other_container.map(this.__value);
}

Container.of(2).map(add).ap(Container.of(3));
// Container(5)

const liftA2 = (f, m1, m2) => m1.map(f).ap(m2)
liftA2(add, Container.of(2), Container.of(3))

// Http.get :: String -> Task Error HTML

var renderPage = curry(function(destinations, events) { /* render page */  });

Task.of(renderPage).ap(Http.get("/destinations")).ap(Http.get("/events"))
// Task("
some page with dest and events
")

// identity
map(id) === id;

// composition
compose(map(f), map(g)) === map(compose(f, g));

bind(unit(x), f) ≡ f(x)
bind(m, unit) ≡ m
bind(bind(m, f), g) ≡ bind(m, x ? bind(f(x), g))

Identity: A.of(x => x).ap(v) === v
Homomorphism: A.of(f).ap(A.of(x)) === A.of(f(x))
Interchange: u.ap(A.of(y)) === A.of(f => f(y)).ap(u)

面向對象對數據進行抽象，將行為以對象方法的方式封裝到數據實體內部，從而降低系統的耦合度。而函數式編程，選擇對過程進行抽象，將數據以輸入輸出流的方式封裝進過程內部，從而也降低系統的耦合度。兩者雖是截然不同，然而在系統設計的目標上可以說是殊途同歸的。
面向對象思想和函數式編程思想也是不矛盾的，因為一個龐大的系統，可能既要對數據進行抽象，又要對過程進行抽象，或者一個局部適合進行數據抽象，另一個局部適合進行過程抽象，這都是可能的。數據抽象不一定以對象實體為形式，同樣過程抽象也不是說形式上必然是 functional 的，比如流式對象（InputStream、OutputStream）、Express 的 middleware，就帶有明顯的過程抽象的特征。但是在通常情況下，OOP更適合用來做數據抽象，FP更適合用來做過程抽象。

const textColor = "red"
const comp = () => {
    return (
        

    )
}

說白了前端和后端不一樣的關鍵點是后端HTTP較多，前端渲染多，前端真正的剛需是數據綁定機制。后端一次對話，計算好Response發回就完成任務了，所以后端吃了二十年年MVC老本還是挺好用的。前端處理的是連續的時間軸，并非一次對話，像后端那樣賦值簡單傳遞就容易斷檔，導致狀態不一致，帶來大量額外復雜度和Bug。不管是標準FRP還是Mobx這種命令式API的TFRP，內部都是基于函數式設計的。函數式重新發明的Return和分號是要比裸命令式好得多的（前端狀態可以同步，后端線程安全等等，想怎么封裝就怎么封裝）。

接上條，大幅簡化異步，IO，渲染等作用/副作用相關代碼。和很多人想象的不一樣，函數式很擅長處理作用，只是多一層抽象，如果應用稍微復雜一點，這點成本很快就能找回來（Redux Saga是個例子，特別是你寫測試的情況下）。渲染現在大家都可以理解冪等渲染地好處了，其實函數式編程各種作用和狀態也是冪等的，對于復雜應用非常有幫助。

引用透明，無副作用，代數設計讓函數式代碼可以正確優雅地復用。前端不像后端業務固定，做好業務分析和DDD就可以搭個靜態結構，高枕無憂了。前端的好代碼一定是活的，每處都可能亂改。可組合性其實很重要。通過高階函數來組合效果和效率都要高于繼承，試著多用ramda，你就可以發現絕大部分東西都能一行寫完，最后給個實參就變成一個UI，來需求改兩筆就變成另外一個。