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)容,需要的朋友可以參考下
在尋找如何設(shè)計一個Javascript API的時候，發(fā)現(xiàn)了Method Chaining這個東西，方法鏈，看上去似乎很強大，也挺有意思的，而這個東西也是過去我們經(jīng)?？吹降?。。
Javascript Method Chaining
在維基百科上有這樣的解釋:
復(fù)制代碼 代碼如下:
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.
拿翻譯工具翻譯了一下:
復(fù)制代碼 代碼如下:
方法鏈，也被稱為命名參數(shù)法，是在面向?qū)ο蟮木幊陶Z言調(diào)用的調(diào)用多個方法的通用語法。每一個方法返回一個對象，允許電話連接到一起，在一個單一的聲明。鏈接是語法糖，省去了中間變量的需要。方法鏈也被稱為火車殘骸中由于方法來相繼發(fā)生的同一行以上的方法都鎖在即使換行通常添加方法間的數(shù)量增加。
Method Chaining 使用
目測對于方法鏈用得最多的，應(yīng)該就是jQuery了。
復(fù)制代碼 代碼如下:
// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');
我們可以用這樣的用法來調(diào)用這個。jQuery嚴(yán)重依賴于鏈接。這使得它很容易調(diào)用的幾個方法相同的選擇。這也使得代碼更清晰和防止執(zhí)行相同的選擇幾次（提高性能）。沒有方法鏈的時候則是下面的樣子
復(fù)制代碼 代碼如下:
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
看上去和設(shè)計模式中的builder很像，不同的是，這里的p是方法，而不是一個類。
Javascript 方法鏈?zhǔn)纠?/strong>
在之前我們說到Javascript 高階函數(shù) 的時候，說到的print('Hello')('World')，而這種用法的結(jié)果可能會變成這樣子。
復(fù)制代碼 代碼如下:
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)上的一個例子，然而也是我上一次寫鏈?zhǔn)秸{(diào)用的作法?？瓷先ト醣?。
復(fù)制代碼 代碼如下:
var func = (function() {
return{
add: function () {
console.log('1');
return{
result: function () {
console.log('2');
}
}
}
}
})();
func.add().result();
實際上應(yīng)該在每個function都要有個return this，于是就有了:
復(fù)制代碼 代碼如下:
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();
當(dāng)然我們也可以將最后的兩句
復(fù)制代碼 代碼如下:
var func = new Func();
func.add().result();
變成
復(fù)制代碼 代碼如下:
new Func().add().result();
其他
最后作為一個迷惑的地方的小比較:
Method Chaining VS prototype Chaining
原型鏈與方法鏈在某些方面上是差不多的，不同的地方或許在于
1.原型鏈?zhǔn)切枰迷?br /> 2.方法鏈則是用方法
相關(guān)文章
本文主要介紹了javascript實現(xiàn)下雨效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
最近碰到一個需求,要求獲取video視頻某一幀做封面圖片,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于js截取video視頻某一幀做封面的簡單案例,需要的朋友可以參考下2024-04-04
JS監(jiān)聽和響應(yīng)DOM元素的變化的方法
在前端開發(fā)中,處理動態(tài)變化的 DOM（文檔對象模型）很是常見的需求,比如自動化測試中,可能需要監(jiān)控 DOM 變化來驗證測試條件,在用戶填寫表單時,某些字段需要即時驗證等,所以本文給大家介紹了JS監(jiān)聽和響應(yīng)DOM元素的變化的方法,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)上下左右鍵盤控制div移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
通過V8源碼看一個關(guān)于JS數(shù)組排序的詭異問題
一直在學(xué)習(xí)C++，也想閱讀點開源的C++項目，發(fā)現(xiàn)網(wǎng)上對Google V8評價不錯，于是上Github上找到了源代碼，但在學(xué)習(xí)中遇到一個js數(shù)組排序的問題，下面這篇文章主要給大家介紹了通過V8源碼說說一個關(guān)于JS數(shù)組排序的詭異問題的相關(guān)資料，需要的朋友可以參考下。2017-08-08
對于js中的對象的深拷貝在項目的開發(fā)中比較常用到,這篇文章主要給大家介紹了關(guān)于JS中不一樣的深拷貝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
詳解如何在微信小程序開發(fā)中正確的使用vant ui組件
這篇文章主要介紹了詳解如何在微信小程序開發(fā)中正確的使用vant ui組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
微信小程序?qū)崿F(xiàn)打開并下載服務(wù)器上面的pdf文件到手機
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開并下載服務(wù)器上面的pdf文件到手機，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法
今天小編就為大家分享一篇轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了Javascript中浮點數(shù)相乘的一個解決方法,需要的朋友可以參考下2014-06-06