本文例項講述了JavaScript鏈式呼叫原理與實現方法。分享給大家供大家參考，具體如下：

1、什麼是鏈式呼叫？

這個很容易理解，例如

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

一般的函式呼叫和鏈式呼叫的區別：鏈式呼叫完方法後，return this返回當前呼叫方法的物件。

首先，我們先來看看一般函式的呼叫方式

（1）先建立一個簡單的類

//建立一個bird類
  function Bird(name) {
    this.name=name;
    this.run=function () {
    document.write(name+" "+"start run;");
        }
    this.stopRun=function () {
     document.write(name+" "+"start run;");
        }
    this.sing=function () {
      document.write(name+" "+"start sing;");
    }
    this.stopSing=function () {
      document.write(name+" "+"start stopSing;");
    }
  }

（2）使用方式：一般的呼叫方式

 var bird=new Bird("測試");
  bird.run();
  birdbird.sing();
  bird.stopSing();
  bird.stopRun();

//結果為;測試 start run;測試 start sing;測試 start stopSing;測試 start run;

（3）總結，該種方式有一個弊端就是：多次重複使用一個物件變數

然後，我們再來看看將上述改成鏈式呼叫的格式

（1）在建立的簡單類中加上return this，如下

//建立一個bird類
  function Bird(name) {
    this.name=name;
    this.run=function () {
      document.write(name+" "+"start run;");
      return this;// return this返回當前呼叫方法的物件。
    }
    this.stopRun=function () {
      document.write(name+" "+"start run;");
      return this;
    }
    this.sing=function () {
      document.write(name+" "+"start sing;");
      return this;
    }
    this.stopSing=function () {
      document.write(name+" "+"start stopSing;");
      return this;
    }
  }

（2）使用鏈式呼叫（連綴的方式）

var bird=new Bird("測試");
  bird.run().sing().stopSing().stopRun();//結果為;測試 start run;測試 start sing;測試 start stopSing;測試 start run;

（3）總結此種方式的呼叫結果與一般的呼叫方式產生的結果一樣，優點是：鏈式呼叫這種風格有助於簡化程式碼的編寫工作，讓程式碼更加簡潔、易讀，同時也避免多次重複使用一個物件變數

2.模仿jquery的鏈式呼叫

第一步，定義一個含引數的空物件

(function(){
 //下劃線：表示私有變數的寫法
  function _$(els) { };//有引數的空物件
})()//程式啟動的時候 裡面的程式碼直接執行了

第二步，準備方法 在_$上定義一個onrReady方法

(function(){

  //第一步，下劃線：表示私有變數的寫法
  function _$(els) { };//有引數的空物件

  //第二步，準備方法 在_$上定義一個onrReady方法
  _$.onrReady=function (fn) {
    //按要求把物件（_$）註冊到window物件上
    //對外開放的介面
    window.$=function () {
      return new _$(arguments);//傳遞相應的方法呼叫引數 返回一可以使用function類原型上的方法的物件（$("")=_$(引數)）
    }
    fn();
  }
  }
})()

第三步，為了類（Function）能擴充套件函式，我們定義一個它的靜態函式

Function.prototype.method=function (name,fn) {//（函式名稱，函式本身）
   this.prototype[name]=fn;
   return this;//鏈式呼叫關鍵
};//這個函式的意思：為function物件增加函式，會用鏈式呼叫，鏈式呼叫有兩個引數name,和fn

第四步，擴充套件類的相應方法 鏈式的物件增加jquery庫提供的操作函式

(function(){
  //下劃線：表示私有變數的寫法
  function _$(els) { };//有引數的空物件
  //第二步，準備方法 在_$上定義一個onrReady方法
  _$.onrReady=function (fn) {
    //按要求把物件（_$）註冊到window物件上  
    //對外開放的介面
    window.$=function () {
      return new _$(arguments);//傳遞相應的方法呼叫引數 返回一可以使用function類原型上的方法的物件（$("")=_$(引數)）
    }
    fn();
  }
   //第四步
  //擴充套件類的相應方法 鏈式的物件增加jquery庫提供的操作函式 
_$.method("AddEvent",function (type,fn) {//_$本身是一個function要繼承原型鏈上的東西。
  fn();
}).method("getEvent",function (fn,e) {
  fn();
})

})()

第五步，使用 ，需要呼叫_$.onReady方法才可以返回物件使用從function類繼承而來的原型上的方法

(function () {
  // （1）下劃線：表示私有變數的寫法
  function _$(els) { };//有引數的空物件
  //（2）準備方法 在_$上定義一個onrReady方法
   // window.$=_$;
  _$.onrReady=function (fn) {
    //按要求把物件（_$）註冊到window物件上  在任何地方都可以使用
    //對外開放的介面
    window.$=function () {//window 上先註冊一個全域性變數 與外界產生關係
      return new _$(arguments);//傳遞相應的方法呼叫引數 返回一可以使用function類原型上的方法的物件（$("")=_$(引數)）
    }
    fn();
  }
  //（4）擴充套件類的相應方法 鏈式的物件增加jquery庫提供的操作函式
_$.method("AddEvent",e) {
  fn();
});
  //第五步，開始使用 ，需要呼叫_$.onready方法才可以返回物件使用從function類繼承而來的原型上的方法
   _$.onrReady(function () {//$是繫結在Windows上的
    $("").AddEvent("click",function () {
      alert("click")
    })
  })

})()

上述綜合的程式碼為

//第三步，為了類（Function）能擴充套件函式，我們定義一個它的靜態函式
Function.prototype.method=function (name,和fn

(function () {
  // 第一步，下劃線：表示私有變數的寫法
  function _$(els) { };//有引數的空物件
  //第二步，準備方法 在_$上定義一個onrReady方法
   // window.$=_$;
  _$.onrReady=function (fn) {
    //按要求把物件（_$）註冊到window物件上 
    //對外開放的介面
    window.$=function () {
      return new _$(arguments);//傳遞相應的方法呼叫引數 返回一可以使用function類原型上的方法的物件（$("")=_$(引數)）
    }
    fn();
  }
  //第四步，擴充套件類的相應方法 鏈式的物件增加jquery庫提供的操作函式
_$.method("AddEvent",fn) {//_$本身是一個function要繼承原型鏈上的東西，所以可以使用method方法
  fn();
}).method("getEvent",e) {
  fn();
});
  //第五步，開始使用，需要呼叫_$.onready方法才可以返回物件使用從function類繼承而來的原型上的方法
   _$.onrReady(function () {//$是繫結在Windows上的
    $("").AddEvent("click",function () {
      alert("click")
    })
  })
})()

上述是將$繫結到window上的操作，如果我們想將$繫結到一個指定物件上我們可以這通過改變上述的第二步和第五步如下，

/**
 * Created by 與你在巔峰相會 on 2017/10/12.
 */

//第三步，為了類（Function）能擴充套件函式，我們定義一個它的靜態函式
Function.prototype.method=function (name,和fn

(function () {
  // 第一步，下劃線：表示私有變數的寫法
  function _$(els) { };//有引數的空物件
  //第二步，準備方法 在_$上定義一個onrReady方法
  _$.onReady=function (obj,fn) {//obj傳進來的物件
    if(obj){
      //按要求把物件（_$）註冊到window物件上 
      //對外開放的介面
      obj.$=function () {
        return new _$(arguments);//傳遞相應的方法呼叫引數 返回一可以使用function類原型上的方法的物件（$("")=_$(引數)）
      }
    }else {
      //按要求把物件（_$）註冊到window物件上  
      //對外開放的介面
      window.$=function () {
        return new _$(arguments);//傳遞相應的方法呼叫引數 返回一可以使用function類原型上的方法的物件（$("")=_$(引數)）
      }
    }
    fn();
  }
  //第四步，擴充套件類的相應方法 鏈式的物件增加jquery庫提供的操作函式
_$.method("AddEvent",fn) {//_$本身是一個function要繼承原型鏈上的東西，可以直接使用method方法
  fn();
}).method("getEvent",e) {
  fn();
});
  //第五步，開始使用，需要呼叫_$.onready方法才可以返回物件使用從function類繼承而來的原型上的方法
   var com={};
  _$.onReady(com,function () {//$是繫結在Windows上的
    com.$("").AddEvent("click",function () {
      alert("click")
    })
  })
})()

自己畫一個圖簡單理解一下上面的過程及思路：

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。