Javascript中的方法鏈（Method Chaining）介紹

 這篇文章主要介紹了Javascript中的方法鏈（Method Chaining）介紹,本文講解了Javascript Method Chaining、Method Chaining 使用、Method Chaining VS prototype Chaining等內容,需要的朋友可以參考下

   

在尋找如何設計一個Javascript API的時候，發現了Method Chaining這個東西，方法鏈，看上去似乎很強大，也挺有意思的，而這個東西也是過去我們經常看到的。。

Javascript Method Chaining

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

代碼如下:
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.

 

拿翻譯工具翻譯了一下:

 

代碼如下:
方法鏈，也被稱為命名參數法，是在面向對象的編程語言調用的調用多個方法的通用語法。每一個方法返回一個對象，允許電話連接到一起，在一個單一的聲明。鏈接是語法糖，省去了中間變量的需要。方法鏈也被稱為火車殘骸中由於方法來相繼發生的同一行以上的方法都鎖在即使換行通常添加方法間的數量增加。

 

Method Chaining 使用

目測對於方法鏈用得最多的，應該就是jQuery了。

代碼如下:
// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');
我們可以用這樣的用法來調用這個。jQuery嚴重依賴於鏈接。這使得它很容易調用的幾個方法相同的選擇。這也使得代碼更清晰和防止執行相同的選擇幾次（提高性能）。沒有方法鏈的時候則是下面的樣子
代碼如下:
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
看上去和設計模式中的builder很像，不同的是，這裡的p是方法，而不是一個類。

 

Javascript 方法鏈示例

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

代碼如下:
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
這是網上的一個例子，然而也是我上一次寫鏈式調用的作法。看上去弱爆了。
代碼如下:
var func = (function() {
return{
add: function () {
console.log('1');
return{
result: function () {
console.log('2');
}
}
}
}
})();

 

func.add().result();

實際上應該在每個function都要有個return this，於是就有了:
代碼如下:
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();

當然我們也可以將最後的兩句
代碼如下:
var func = new Func();
func.add().result();
變成
代碼如下:
new Func().add().result();

 

其他

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

Method Chaining VS prototype Chaining

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

1.原型鏈是需要用原型
2.方法鏈則是用方法