js 链式操作

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

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

最 常 见 的 , 是 j Q u e r y 直 接 返 回 t h i s 的 方 式 \color{red}{最常见的,是jQuery直接返回this的方式} jQuerythis
先理解下最简单的链式调用法

我们可以用简单的构建对象的方法来实现
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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值