javascript 链式调用实现原理

1、链式调用是什么

使用过JQuery 的同学应该都知道，代码如下

$('text’).setStyle('color', 'red').show();

这就是链式调用，就是调用完一个方法以后，不用另起一行，重新再当前this 对象上再去调用方法。
普通的函数调用方式，如下：

var sched = {
  wakeup: function () {
    console.log('Running')
    return this
  },
  morning: function () {
    console.log('Going shopping')
    return this
  }
}
sched.wakeup() // Running
sched.morning() // Going shopping

上边这种方式调用 有一个弊端，就是一个对象或者变量要多次重复使用，

2、实现链式调用

实现链式调用的关键，其实是在当前对象下的每个函数执行完成以后，return this， 就可以实现链式调用。
代码如下

var sched = {
  wakeup: function () {
    console.log('Running')
    return this
  },
  morning: function () {
    console.log('Going shopping')
    return this
  },
  noon: function () {
    console.log('Having a rest')
    return this
  },
  afternoon: function () {
    console.log('Studying')
    return this
  },
  evening: function () {
    console.log('Walking')
    return this
  },
  night: function () {
    console.log('Sleeping')
    return this
  }
}
sched.wakeup().morning().noon().afternoon().evening().night()

执行结果如下：

例子2

function ClassA(){
  this.prop1 = null;
  this.prop2 = null;
  this.prop3 = null;
}
ClassA.prototype = {
  method1 : function(p1){
      this.prop1 = p1;
      return this;
  },
  method2 : function(p2){
      this.prop2 = p2;
      return this;
  },
  method3 : function(p3){
      this.prop3 = p3;
      return this;
  }
}


var obj = new ClassA();  
obj.method1(1).method2(2).method3(3)
console.log(obj)

打印结果

总结一下：
我们都知道，当一个函数被调用的时候，当前的this 指向的是被调用的这个函数（ES6 的箭头函数除外），
当一个对象或者实例下有多个方法，通过对象或者实例去调用他自己的方法时，当前的this 指向的是 当前的这个对象或者实例，如果在这个方法执行完成以后，返回 this
其实也就等于返回的是当前的对象或者实例，在返回的这个对象或者实例 的基础上再去调用这个对象或者实例下的其他方法，就可以省去重新拿当前对象或者实例的步骤，就可以再上一个方法后边继续调用其他方法。链式调用就可以形成。