前言

在compose里面調(diào)用了Array.prototype.reduce方法，首先來分析一下這個(gè)方法的作用，詳細(xì)可以查看reduce文檔；

reduce

reduce方法，是從左向右，對數(shù)組中的每個(gè)元素按照傳入回調(diào)函數(shù)和初始值進(jìn)行運(yùn)算；舉個(gè)栗子：

let arr = [1,2,3,4,5];
let result = arr.reduce((a,b)=>{
    return a+b;
});
console.log(result);

這個(gè)栗子最終會輸出

15

即相當(dāng)于做了以下的運(yùn)算：

((((1+2)+3)+4)+5)

即相當(dāng)于；

let arr = [1,2,3,4,5];
let add = (a,b)=>{
    console.log(`${a}+$=`,a + b);
    return a+b;
}
let result = arr.reduce((a,b)=>{
    return add(a,b);
});
console.log(result);

有意思的事情

下面來看一個(gè)模擬redux插件的實(shí)現(xiàn)方式

let mynext = function(action){
    console.log(action);
}
let wrapper0 = next=>action=>{
    console.log('before');
    let result = next(action);
    console.log('after');
    return result;
}

let wrapper1 = next=>action=>{
    console.log('w1 before');
    let result = next(action);
    console.log('w1 after');
    return result;
}

let wrapper2 = next=>action=>{
    console.log('w2 before');
    let result = next(action);
    console.log('w2 after');
    return result;
}

let result = compose(wrapper0,wrapper1,wrapper2);
console.log(result(mynext)('hello'));

最終輸出結(jié)果

compose.png

看到結(jié)果是不是很驚訝，這個(gè)就類似redux的中間件調(diào)用過程了，中間的是原始的store.dispatch，外面是各個(gè)插件wrapper2 ... 等的輸出結(jié)果。其實(shí)這就是redux實(shí)現(xiàn)插件的內(nèi)部機(jī)制。

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)))
}

以上是ES6的源碼，在redux的lib文件夾下，有一份編譯好的ES5的源碼，如下

function compose() {
  for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
    funcs[_key] = arguments[_key];
  }

  if (funcs.length === 0) {
    return function (arg) {
      return arg;
    };
  }

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

  return funcs.reduce(function (a, b) {
    return function () {
      return a(b.apply(undefined, arguments));
    };
  });
}

來看一下compose做了什么事情：

1. 將arguments轉(zhuǎn)化為數(shù)組；
2. 在數(shù)組上，調(diào)用reduce方法，數(shù)組的內(nèi)部是function，并且最終返回一個(gè)function；