什么是链式调用！

提示💡

可以按流程处理数据。

return dataList
      .filter(item => item.status === 'fulfilled')
      .map(item => item.value)
      .reduce((pre, cur) => {
        // 为路由添加lefturl用于区分不同游戏
        const left = cur.res.data.left.map(item => ({...item, lefturl: cur.lefturl}));
        return pre.concat(left);
      }, []);

链式操作的结构

• 链式对象：能够进行链式操作的对象
• 链式方法：链式对象上能进行链式操作的方法
• 链式数据：链式操作最终想要获得结果是通过被操作数据

链式对象

原理：在构造函数中创建方法时，return this 返回当前调用方法的对象，可以实现链式调用方法。

let f = {
  name: 'dell',
  sayHi: function () {
    console.log(`hello, my name is ${this.name}`)
    return this
  },
  sayBye: function () {
    console.log(`byebye~~~~`)
    return this
  }
}
f.sayHi().sayBye()

链式方法

function numsChain(num){
    var nums = num;
    function chain(num){
        nums = `${nums} -> ${num}`;
        return chain;
    }
    chain.get = () => nums;
    return chain;
}
var des = numsChain(1)(2)(3).get();
console.log(des); // 1 -> 2 -> 3

链式数据

var pipe = function (value) {
  var funcStack = [];
  var oproxy = new Proxy({} , {
    get : function (pipeObject, fnName) {
      if (fnName === 'get') {
        return funcStack.reduce(function (val, fn) {
          return fn(val);
        },value);
      }
      funcStack.push(window[fnName]);
      return oproxy;
    }
  });
 
  return oproxy;
}
 
var double = n => n * 2;
var pow    = n => n * n;
var reverseInt = n => n.toString().split("").reverse().join("") | 0;
 
pipe(3).double.pow.reverseInt.get; // 63

上面代码设置 Proxy 以后，达到了将函数名链式使用的效果。

扩展阅读

• 链式调用等待方法
• @JS函数链式调用的几种方式 - 掘金
• JavaScript 有多灵活？
• Javascript异步编程的4种方法
• Generator 函数的语法