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();