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