引子

看了 Redux 的 applyMiddleware 方法的实现，里面函数嵌套的写法都用了新语法，就想关注一下函数嵌套一类新旧的不同。

上一篇 JavaScript 新旧替换四：继承。

  • Origin
  • My GitHub

ES5 方式

普通嵌套

  function find(value) {    return {      in: function(arr) {        return {          combine: function(obj) {            var result = arr.indexOf(value);            obj.index = result;            return obj;          }        };      }    };  }  var data = find(6).in([1,2,3,4,5,6]).combine({});  console.info(data); // {index: 5}

管道机制

管道机制（pipeline）是指前一个函数的输出是后一个函数的输入。

  const plus = a => a + 1;  const minus = a => a - 2;  const multi = a => a * 3;  const div = a => a / 4;  function pipeline() {    for (var len = arguments.length, funcs = [], key = 0; key < len; key++) {      funcs[key] = arguments[key];    }    return function(val) {      var result = funcs.reduce(function(a, b) {        return b(a);      }, val);      return result;    };  }  var cal = pipeline(plus,minus,multi,div);  var result = cal(5);  console.info(result); // 3

ES2015+ 方式

普通嵌套

  const find = (value) => (    {      in: (arr) => (        {          combine: (obj) => {            const result = arr.indexOf(value);            obj.index = result;            return obj;          }        }      )    }  );  const data = find2(6).in([1,2,3,4,5,6]).combine({});  console.info(data); // {index: 5}

管道机制

  const plus = a => a + 1;  const minus = a => a - 2;  const multi = a => a * 3;  const div = a => a / 4;  const pipeline = (...funcs) => val => funcs.reduce(function(a,b) {    return b(a);  }, val);  const cal = pipeline(plus,minus,multi,div);  const result = cal(5);  console.info(result); // 3

参考资料

  • Redux
  • ECMAScript Standard
  • MDN Arrow_functions
  • ECMAScript 6 function
  • Babel Online