[[356759]]

本文轉載自微信公眾號「前端陽光」，作者事業有成的張啦啦。轉載本文請聯系前端陽光公眾號。事業有成的張啦啦  

前言：為什么要學習這個方法

• compose簡介
• compose的實現
  • 最容易理解的實現方式
  • 手寫javascript中reduce方法
  • redux中compose的實現
• 參考文章

前言：為什么要學習這個方法

遇到這個方法主要是最近在閱讀redux，koa 原理 等多次遇到這個方法，為了更好地理解框架原理，于是深入學習了一下compose的實現。

然后也發現這屬于函數式編程的東西，發現函數式編程是進擊前端進階的必經之路，因為像其中的純函數的概念在redux的reducer中也展示得淋漓盡致，而保留函數計算結果的思想無論是在vue，還是react等其他框架也多處見到。

所以建議有時間可以去看下函數試編程。

接下來，就讓我們學習下其中的compose函數吧!

compose簡介

compose就是執行一系列的任務(函數)，比如有以下任務隊列

let tasks = [step1, step2, step3, step4] 

每一個step都是一個步驟，按照步驟一步一步的執行到結尾，這就是一個compose

compose在函數式編程中是一個很重要的工具函數，在這里實現的compose有三點說明

• 第一個函數是多元的(接受多個參數)，后面的函數都是單元的(接受一個參數)
• 執行順序的自右向左的
• 所有函數的執行都是同步的

還是用一個例子來說，比如有以下幾個函數

let init = (...args) => args.reduce((ele1, ele2) => ele1 + ele2, 0) 
let step2 = (val) => val + 2 
let step3 = (val) => val + 3 
let step4 = (val) => val + 4 

這幾個函數組成一個任務隊列

steps = [step4, step3, step2, init] 

使用compose組合這個隊列并執行

let composeFunc = compose(...steps) 
 
console.log(composeFunc(1, 2, 3)) 

執行過程

6 -> 6 + 2 = 8 -> 8 + 3 = 11 -> 11 + 4 = 15 

所以流程就是從init自右到左依次執行，下一個任務的參數是上一個任務的返回結果，并且任務都是同步的，這樣就能保證任務可以按照有序的方向和有序的時間執行。

compose的實現

好了，我們現在已經知道compose是什么東西了，現在就來實現它吧!

最容易理解的實現方式

思路就是使用遞歸的過程思想，不斷的檢測隊列中是否還有任務，如果有任務就執行，并把執行結果往后傳遞，這里是一個局部的思維，無法預知任務何時結束。直觀上最容易理解。

const compose = function(...funcs) { 
  let length = funcs.length 
  let count = length - 1 
  let result 
  return function f1 (...arg1) { 
    result = funcs[count].apply(this, arg1) 
    if (count <= 0) { 
      count = length - 1 
      return result 
    } 
    count-- 
    return f1.call(null, result) 
  } 
} 

刪繁就簡來看下，去掉args1參數

const compose = function(...funcs) { 
  let length = funcs.length 
  let count = length - 1 
  let result 
  return function f1 () { 
    result = funcs[count]() 
    if (count <= 0) { 
      count = length - 1 
      return result 
    } 
    count-- 
    return f1(result) 
  } 
} 

這就好看很多，我們假設有三個方法，aa，bb，cc

 function aa() { 
    console.log(11); 
} 
 
function bb() { 
    console.log(22); 
} 
function cc() { 
    console.log(33); 
    return 33 
} 

然后傳入compose

compose(aa,bb,cc) 

此時count = 2，則下面其實是執行cc

result = funcs[count]() 

然后count--。再遞歸執行f1，則下面其實就是執行bb

result = funcs[count]() 

這樣，就實現了 從funcs數組里從右往左依次拿方法出來調用，再把返回值傳遞給下一個。

后面的步驟同理。

這其實是一種面向過程的思想

手寫javascript中reduce方法

為什么要手寫?其實你要是能夠很熟練的使用reduce，我覺得不必手寫reduce，只是我覺得熟悉一下reduce內部的實現可以更好地理解后面的內容，況且 也不會太難呀!

function reduce(arr, cb, initialValue){ 
       var num = initValue == undefined? num = arr[0]: initValue; 
       var i = initValue == undefined? 1: 0 
       for (i; i< arr.length; i++){ 
           num = cb(num,arr[i],i) 
       }' 
       return num 
   } 

如代碼所示，就是先判斷有沒有傳入初始值，有的話，下面的循環直接 從i = 0開始，否則i=1開始。

如果沒有傳入初始值，num就取 數組的第一個元素。這也是說明了為什么傳入初始值，i就=1，因為第一個都被取出來了，就不能再取一次啦啦啦!

下面使用我們寫的reduce方法

function fn(result, currentValue, index){ 
       return result + currentValue 
   } 
    
   var arr = [2,3,4,5] 
   var b = reduce(arr, fn,10)  
   var c = reduce(arr, fn) 
   console.log(b)   // 24 

好了 ，沒毛病，既然我們了解了reduce原理，就看看下面的redux中compose的實現吧

redux中compose的實現

function compose(...funcs) { 
    if (funcs.length === 0) { 
        return arg => arg 
    } 
 
    if (funcs.length === 1) { 
        return funcs[0] 
    } 
    debugger 
    return funcs.reduce((a, b) => (...args) => a(b(...args))) 
} 

很簡短，非常的巧妙，但是不是很不好理解。不過沒關系。

依舊通過例子來講解。

function aa() { 
    console.log(11); 
} 
 
function bb() { 
    console.log(22); 
} 
function cc() { 
    console.log(33); 
} 

假設只有這三個方法，我們怎樣才能先執行cc再執行bb，再執行aa呢?沒錯，可以直接寫

aa(bb(cc())) 

就是這樣，非常巧妙，不僅完成了執行順序，還實現了前一個方法執行返回的結果傳遞給了下一個即將要執行的方法。

而下面這段代碼所做的就是將funcs數組[aa,bb,cc]，轉化成aa(bb(cc()))

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

怎么辦到的?

看看下面的解釋：

reduce內部第一次執行返回的結果是 一個方法

(...args) => aa(bb(...args)) 

我們現在把這個方法簡化成dd，即

dd = (...args) => aa(bb(...args)) 

reduce內部第二次執行的時候，此時的a 是 上一次返回的dd方法，b是cc

所以執行結果是

(...args) => dd(cc(...args)) 

而dd(cc(...args))不就是先執行cc再執行dd嗎?而dd就是執行bb再執行aa。

我的天，!這不是俄羅斯套娃嗎!沒錯 redux中的compose的實現原理就是套娃哈哈哈!

參考文章

https://segmentfault.com/a/1190000011447164