javascript实现简单的链式调用

时间 2019-11-17

原文原文链接

用过jQuery的朋友必定对jQuery中方法的链式调用印象深入，貌似如今不少库都支持了方法的链式调用,好比YUI3等。链式调用是一个很是不错的语法特性，能让代码更加简洁、易读。不少时候链式调用能够避免屡次重复使用一个对象变量。今天有人在群里提及javascript链式调用，写了几个简单的实现方式共你们参考一下：
通常咱们我用函数构造一个类，例如：javascript

 
      01 
      var function Dog(name,age){ 
     
      02 
              this.name = name; 
     
      03 
              this.age = age; 
     
      04 
          }; 
     
      05 
          Dog.prototype={ 
     
      06 
              getName:function(){ 
     
      07 
                  console.log(this.name); 
     
      08 
              }, 
     
      09 
              getAge:function(){ 
     
      10 
                  console.log(this.age); 
     
      11 
              } 
     
      12 
          };

定义一个Dog类，并具有几个简单的方法css

 
      1 
      var dog1= new Dog("旺旺",3); 
     
      2 
      dog1.getName(); 
     
      3 
      dog1.getAge();

实例化，而且调用方法。java

要实现链式调用是很是简单的事情，惟一须要作的就是在每一个方法后面返回this。例如：安全

 
      01 
      var Dog=function(name,age){ 
     
      02 
              this.name = name; 
     
      03 
              this.age = age; 
     
      04 
          }; 
     
      05 
          Dog.prototype={ 
     
      06 
              getName:function(){ 
     
      07 
                  console.log(this.name); 
     
      08 
                  return this; 
     
      09 
              }, 
     
      10 
              getAge:function(){ 
     
      11 
                  console.log(this.age); 
     
      12 
                  return this; 
     
      13 
              } 
     
      14 
          }; 
     
      15 
         
      16 
          var dog1= new Dog("旺旺",3); 
     
      17 
          dog1.getName().getAge();

上面的代码能够看出，Dog方法上多了一段代码：return this;
细心一点你会发现这里dog1实例前还须要一个new初始化，仍是有点不方便。在改进一下：函数

 
      01 
      var Dog=function(name,age){ 
     
      02 
              this.name = name; 
     
      03 
              this.age = age; 
     
      04 
          }; 
     
      05 
          Dog.prototype={ 
     
      06 
              getName:function(){ 
     
      07 
                  console.log(this.name); 
     
      08 
                  return this; 
     
      09 
              }, 
     
      10 
              getAge:function(){ 
     
      11 
                  console.log(this.age); 
     
      12 
                  return this; 
     
      13 
              } 
     
      14 
          }; 
     
      15 
          window.Dogs=function(name,age){ 
     
      16 
              return new Dog(name,age); 
     
      17 
          }; 
     
      18 
          Dogs("旺旺",3).getName().getAge();

这里在window下定义一个Dogs方法，做为Dog的别名，这样就能够直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。
苛刻的网友说这样太暴露了，这样有两个全局变量变量Dog和Dogs，在改进一下：this

 
      01 
      var Dog=function(name,age){ 
     
      02 
              if(!(this instanceof Dog)){ 
     
      03 
                  return new Dog(name,age); 
     
      04 
              } 
     
      05 
              this.name = name; 
     
      06 
              this.age = age; 
     
      07 
          }; 
     
      08 
          Dog.prototype={ 
     
      09 
              getName:function(){ 
     
      10 
                  console.log(this.name); 
     
      11 
                  return this; 
     
      12 
              }, 
     
      13 
              getAge:function(){ 
     
      14 
                  console.log(this.age); 
     
      15 
                  return this; 
     
      16 
              } 
     
      17 
          }; 
     
      18 
          Dog("旺旺",3).getName().getAge();

这里在构造函数中加了这么一句：spa

 
      1 
      if(!(this instanceof Dog)){ 
     
      2 
           return new Dog(name,age); 
     
      3 
      }

判断this是否为Dog实例，若是不是就建立一个新实例。prototype

更为安全代码：code

 
      01 
      (function(){ 
     
      02 
              var Dog=function(name,age){ 
     
      03 
                  if(!(this instanceof Dog)){ 
     
      04 
                      return new Dog(name,age); 
     
      05 
                  } 
     
      06 
                  this.name = name; 
     
      07 
                  this.age = age; 
     
      08 
              }; 
     
      09 
              Dog.prototype={ 
     
      10 
                  getName:function(){ 
     
      11 
                      console.log(this.name); 
     
      12 
                      return this; 
     
      13 
                  }, 
     
      14 
                  getAge:function(){ 
     
      15 
                      console.log(this.age); 
     
      16 
                      return this; 
     
      17 
                  } 
     
      18 
              }; 
     
      19 
              return (window.Dog=Dog); 
     
      20 
          })(); 
     
      21 
          Dog("旺旺",3).getName().getAge();

或者：对象

 
      01 
      (function(){ 
     
      02 
              var Dog=function(name,age){ 
     
      03 
                  this.name = name; 
     
      04 
                  this.age = age; 
     
      05 
              }; 
     
      06 
              Dog.prototype={ 
     
      07 
                  getName:function(){ 
     
      08 
                      console.log(this.name); 
     
      09 
                      return this; 
     
      10 
                  }, 
     
      11 
                  getAge:function(){ 
     
      12 
                      console.log(this.age); 
     
      13 
                      return this; 
     
      14 
                  } 
     
      15 
              }; 
     
      16 
              window.Dogs=function(name,age){ 
     
      17 
                  return new Dog(name,age); 
     
      18 
              }; 
     
      19 
          })(); 
     
      20 
         
      21 
          Dogs("旺旺",3).getName().getAge();

但愿对新手有所帮助，若有不对之处欢迎留言拍砖斧正！