js 链式操作

$(“elem”).show().css(“color”,”red”); 这就是jq里面的链式操作了 是不是很方便啊
可是以前只是用的比较方便 没仔细了解过是怎么实现的 被问到了也不知所措所以我就借鉴了下面资料来了解下js的链式操作

https://segmentfault.com/a/1190000008724608
http://www.jb51.net/article/75476.htm

$\color{red}{最常见的，是jQuery直接返回this的方式}$
先理解下最简单的链式调用法

我们可以用简单的构建对象的方法来实现
let Obj = {
    a: 0,
    add: function(){
        this.a += 1;
        return this
    }
}
Obj.add().add();
console.log(Obj.a);    //2

这个只是最简单的实现链式调用的方法

实现Obj.add(1).add(2).add(3) // 6
let Obj = {
    a: 0,
    add: function(b){
        this.a = b+this.a;
        return this
    }
}
Obj.add(1).add(2).add(3);
console.log(Obj.a);    //6 

return this 是链式调用的核心

多个方法的链式调用

function Dog(){
    this.run= function(){
      alert("The dog is running....");
      return this;//返回当前对象 Dog
    };
    this.eat= function(){
      alert("After running the dog is eatting....");
      return this;//返回当前对象 Dog

    };
    this.sleep= function(){
      alert("After eatting the dog is running....");
      return this;//返回当前对象 Dog

    };
  }
  //一般的调用方式；
/* var dog1 =new Dog();
  dog1.run();
  dog1.eat();
  dog1.sleep();*/
  var dog2 = new Dog();
  dog2.run().eat().sleep();