Javascript中的方法鏈（Method Chaining）介紹
更新時間：2015年03月15日 10:43:11 投稿：junjie
這篇文章主要介紹了Javascript中的方法鏈（Method Chaining）介紹,本文講解了Javascript Method Chaining、Method Chaining 使用、Method Chaining VS prototype Chaining等內(nèi)容,需要的朋友可以參考下
在尋找如何設計一個Javascript API的時候，發(fā)現(xiàn)了Method Chaining這個東西，方法鏈，看上去似乎很強大，也挺有意思的，而這個東西也是過去我們經(jīng)常看到的。。
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.
拿翻譯工具翻譯了一下:
復制代碼 代碼如下:
方法鏈，也被稱為命名參數(shù)法，是在面向?qū)ο蟮木幊陶Z言調(diào)用的調(diào)用多個方法的通用語法。每一個方法返回一個對象，允許電話連接到一起，在一個單一的聲明。鏈接是語法糖，省去了中間變量的需要。方法鏈也被稱為火車殘骸中由于方法來相繼發(fā)生的同一行以上的方法都鎖在即使換行通常添加方法間的數(shù)量增加。
Method Chaining 使用
目測對于方法鏈用得最多的，應該就是jQuery了。
復制代碼 代碼如下:
// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');
我們可以用這樣的用法來調(diào)用這個。jQuery嚴重依賴于鏈接。這使得它很容易調(diào)用的幾個方法相同的選擇。這也使得代碼更清晰和防止執(zhí)行相同的選擇幾次（提高性能）。沒有方法鏈的時候則是下面的樣子
復制代碼 代碼如下:
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
看上去和設計模式中的builder很像，不同的是，這里的p是方法，而不是一個類。
Javascript 方法鏈示例
在之前我們說到Javascript 高階函數(shù) 的時候，說到的print('Hello')('World')，而這種用法的結(jié)果可能會變成這樣子。
復制代碼 代碼如下:
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
這是網(wǎng)上的一個例子，然而也是我上一次寫鏈式調(diào)用的作法?？瓷先ト醣恕?br />
復制代碼 代碼如下:
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.方法鏈則是用方法
相關文章
Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別之處
其它的面向?qū)ο蟪绦蛟O計語言都是通過關鍵字來解決繼承的問題。但是javascript中并沒有定義這種實現(xiàn)的機制。接下來通過本文給大家介紹Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別,需要的朋友可以參考下2017-04-04
JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實現(xiàn)示例
很多時候，跟后端接口開發(fā)對接時，因為需求的關系，需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對應，有時候需要的是多維數(shù)據(jù)，這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實現(xiàn)示例，感興趣的可以了解一下2021-12-12
Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫這篇文章之前花了2個多小時在弄正則表達式，下為大家介紹下具體的實現(xiàn)思路，感興趣的朋友可以參考下2013-10-10
有時候我們在使用Canvas繪制一段文本時，會需要通過measureText()方法獲取文本的寬度，本文主要介紹了在小程序Canvas中使用measureText的方法示例，需要的朋友可以參考下2018-10-10
JS之判斷是否為對象或數(shù)組的幾種方式總結(jié)
這篇文章主要介紹了JS之判斷是否為對象或數(shù)組的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關于JavaScript指定斷點操作的相關資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-09-09
JavaScript指定字段排序方法sortFun函數(shù)
這篇文章主要介紹了JavaScript指定字段排序方法sortFun函數(shù)，數(shù)組的排序方法是sort，但是它并不支持根據(jù)指定的字段進行排序，而sortFun可以根據(jù)指定的字段進行排序，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了微信小程序商品詳情頁的底部彈出框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
表單提交前觸發(fā)函數(shù)返回true表單才會提交
這篇文章主要介紹了表單提交前觸發(fā)函數(shù)當返回true表單才會提交的具體實現(xiàn),需要的朋友可以參考下2014-03-03
這篇文章主要介紹了淺談webpack 四個核心概念之Entry，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06