js方法鏈（Method Chaining）簡單介紹

所謂的方法鏈也就是大家常說的鏈式呼叫，本章節就對此做一下介紹，希望能夠給需要的朋友帶來一定的幫助。

Javascript Method Chaining:

維基百科上有這樣的解釋:

[JavaScript] 純文字檢視 複製程式碼
Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.

大致的翻譯如下，可能會不夠精準:

[JavaScript] 純文字檢視 複製程式碼
方法鏈，也被稱為命名引數法，是在物件導向的程式語言呼叫的呼叫多個方法的通用語法。每一個方法返回一個物件，允許電話連線到一起，在一個單一的宣告。連結是語法糖，省去了中間變數的需要。方法鏈也被稱為火車殘骸中由於方法來相繼發生的同一行以上的方法都鎖在即使換行通常新增方法間的數量增加。

Method Chaining使用:

估計使用方法鏈最多的可能就是jquery了，當然是以本人的視野範圍為衡量標準的。

[JavaScript] 純文字檢視 複製程式碼
// chaining
$("#person").slideDown('slow')
   .addClass('grouped')
   .css('margin-left', '11px');

jQuery嚴重依賴於連結。這使得它很容易呼叫的幾個方法相同的選擇。這也使得程式碼更清晰和防止執行相同的選擇幾次（提高效能）。沒有方法鏈的時候則是下面的樣子:

[JavaScript] 純文字檢視 複製程式碼
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');

看上去和設計模式中的builder很像，不同的是，這裡的p是方法，而不是一個類。

Javascript 方法鏈示例:

在之前說到Javascript高階函式的時候，說到的print('Hello')('World')，而這種用法的結果可能會變成這樣子。

[JavaScript] 純文字檢視 複製程式碼
function f(i){
  return function(e){
    i+=e;
    return function(e){
      i+=e;
      return function(e){
        alert(i+e);
      };
    };
  };
};
f(1)(2)(3)(4); //10

這是網上的一個例子，然而也是本人上一次寫鏈式呼叫的作法。

[JavaScript] 純文字檢視 複製程式碼
var func = (function() {
    return{
        add: function () {
            console.log('1');
            return{
                result: function () {
                    console.log('2');
                }
            }
        }
    }
})();
func.add().result();

實際上應該在每個function都要有個return this，於是就有了:

[JavaScript] 純文字檢視 複製程式碼
Func = (function() {
    this.add = function(){
        console.log('1');
        return this;
    };
    this.result = function(){
        console.log('2');
        return this;
    };
    return this;
});
var func = new Func();
func.add().result();

當然我們也可以將最後的兩句

[JavaScript] 純文字檢視 複製程式碼
var func = new Func();
func.add().result();

變成

[JavaScript] 純文字檢視 複製程式碼
new Func().add().result();

其他:

最後作為一個迷惑的地方的小比較:

Method Chaining VS prototype Chaining

原型鏈與方法鏈在某些方面上是差不多的，不同的地方或許在於

1.原型鏈是需要用原型

2.方法鏈則是用方法