JS中的链式操作

1. jQuery中的链式操作

想必老前端们对jQuery都不陌生，毕竟在Angular, React, Vue等优秀的框架初始出世之前是我们的必备工具。 jQuery的一大优点就是其经典的链式操作。而链式操作具体是怎么实现的呢？今天我们来一起回顾一下。

说到jQuery的链式操作原理，我们知道，JS中函数在没有返回值时会隐式返回一个undefined，而在jQuery中我们会让所有方法都返回一个this对象，这样链后边的方法就可以继续在this的环境中执行。这种链模式是原理是基于原型继承的，当然我们也可以使用ES6的class写法，我们来手动实现一下：

class Person {
    name: string
    age: number
    setName(name: string) {
      this.name = name;
      return this;
    }
    setAge(age: number) {
      this.age = age;
      return this;
    }
}
const me = new Person();
me.setName('Nicholas').setAge(80)

2. Proxy实现链式操作

利用Proxy我们也同样可以实现链式操作

var pipe = function (value) {
  // 将链上的方法存入数组
  var funcStack = [];
  var oproxy = new Proxy({} , {
    get : function (pipeObject, fnName) {
// 遇到get方法是调用proxy handler，通过reducer逐个处理列表中函数
      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; 
console.log(pipe(3).double.pow.reverseInt.get)

链式操作的优缺点

先说缺点吧，因为链式操作要返回this对象，所以在需要返回值的情况下，如get操作，是不能继续接其他的链方法的，这个天然符合jQuery的特性，操作DOM，不需要返回值

再说优点，联想一下Promise，promise每次都会返回一个promise对象，通过then方法指定回调函数。 这种方法使得函数的操作更加直观，同时也不会像回调函数一样相互耦合。