js实现链式操作

前言：前不久阿里远程面试时问了我一个问题，如下：

function Person(){};
var person  = new Person();
//实现person.set(10).get()返回20

当时正在问我原型链的问题，所以面试官直接用我写的person问的，我当时是这么实现的：

function Person(){};
var person  = new Person();
person.set = function(n){
  return {
    get:function(){
      return n*2;
  }}
}

返回结果其实也对，但set()和get()耦合太紧，不灵活。再联想一下当时正在考我原型链，且面试开始时问了我jQuery的链式操作原理（没答上来），所以感觉这题应该跟链式操作有关，于是上网查了查，确实是要用链式操作。先来看看链式操作的原理和js如何实现。

js实现链式操作

jQuery有一个十分强大的特点：链式操作。其实原理很简单，就是每次方法执行完后返回this对象，这样后面的方法就可以继续在this环境下执行。先来实现一下：

//创建一个类
function Person(){};
//在原型上定义相关方法
Person.prototype ={
  setName:function(){
    this.name = name;
    return this;
  },
  setAge:function(){
    this.age = age;
    return this;
  }
}
//实例化
var person= new Person();
person.setName("Mary").setAge(20);

以上过程就实现了链式操作，而原理只是在每个方法调用后返回了this。jQuery中不用new一个实例化对象，所以可以将实例化过程封装如下：

//将实例化过程封装为一个函数
function newObj(){
  return new Person();
}
newObj().setName("Mary").setAge(20);

此时再想想上面的那道题，就很简单了：

function Person(){};
//实现部分
Person.prototype ={
  set:function(value){
    this.value = value;
    return this;
  },
  get:function(){
    return this.value*2;//由于要返回值，且不需要继续调用方法，所以不返回this
  }
}
var person = new Person();
console.log(person.set(10).get());//20

链式操作的优缺点

首先来说说缺点。

根据上面阿里面试题的实现，我们可以看出，get方法里不能返回this，因为有值需要返回。这就是链式操作的一个局限：只能应用在不需要返回值的情况下，或者只能最后一步需要返回值。jQuery主要是对DOM元素的操作，只需要改变DOM元素的表现而不需要返回值，所以适合链式操作。

再来说说优点。

js的执行环境为单线程，为了避免阻塞，我们时常用一些异步编程方式来完成一些可能产生阻塞的操作。常见的异步编程方式包括回调函数、事件监听、ES6中的Promise对象。

链式操作实际上就是使得异步编程的流程更加清晰，不会像回调函数一样相互耦合，难以分辨函数的执行顺序且维护困难。ES6中的Promise也正是沿用了这一思想，每一个异步任务返回一个Promise对象，通过then方法指定回调函数。