資訊專(zhuān)欄INFORMATION COLUMN
摘要：一鏈?zhǔn)骄幋a好處同一對(duì)象多次其屬性或方法的時(shí)候，我們需要多次書(shū)寫(xiě)對(duì)象進(jìn)行或操作鏈?zhǔn)秸{(diào)用是一種簡(jiǎn)化此過(guò)程的一種編碼方式，使代碼簡(jiǎn)潔易讀。
一、鏈?zhǔn)骄幋a
好處
同一對(duì)象多次其屬性或方法的時(shí)候，我們需要多次書(shū)寫(xiě)對(duì)象進(jìn)行“.” 或 () 操作；鏈?zhǔn)秸{(diào)用是一種簡(jiǎn)化此過(guò)程的一種編碼方式，使代碼簡(jiǎn)潔、易讀。
舉個(gè)栗子（深刻不是很貼切的）：日常餐廳取餐，通常我們一次拿取想要的食物一起結(jié)賬，如果每樣食物要分開(kāi)取餐結(jié)賬估計(jì)內(nèi)心的草泥馬要躁動(dòng)起來(lái)了。
常用場(chǎng)景
#jQuery的Dom操作
$("select").on("click", callback)
.on("change", callback);
#gulp編譯
gulp.src("/path/to/**.less")
.pipe(less())
.pipe(cssmin())
（廢話不多說(shuō)，切入正題…… ）
二、鏈?zhǔn)骄幋a的原理
鏈?zhǔn)秸{(diào)用原理就是作用域鏈；實(shí)現(xiàn)需要做的工作；
對(duì)象方法的處理 （操作方法）
處理完成返回對(duì)象的引用（操作對(duì)象）
第2步鏈?zhǔn)綄?shí)現(xiàn)的方式：
<1> this的作用域鏈，jQuery的實(shí)現(xiàn)方式；【示例1】
<2> 返回對(duì)象本身, 同this的區(qū)別就是顯示返回鏈?zhǔn)綄?duì)象；【示例2】
<3> 閉包返回對(duì)象通過(guò)調(diào)用覆蓋valueOf方法實(shí)現(xiàn)，副作用獲取結(jié)果需要調(diào)用valueOf;（此種方法適用于操作方法有相互依賴的情況下使用）【示例3】
示例1 根據(jù)一個(gè)人的年齡獲取其年齡段 在線效果
person.set(10).get(); // 我還是個(gè)少年
var Person = function() {};
Person.prototype.set = function (age){
this.age = 10;
return this; //this調(diào)用位置決定其詞法作用域
}
Person.prototype.get = function (){
var age = this.age;
if(age < 6){
return "我還是個(gè)寶寶";
}else if(age < 18){
return "我還是個(gè)少年";
}else{
//……
}
}
var person = new Person();
person.set(10).get(); // "我還是個(gè)少年"
示例2 示例1的實(shí)現(xiàn) 在線效果
var person = {
set: function (age){
this.age = 10; //this調(diào)用位置決定其詞法作用域
return person;
},
get: function (){
var age = this.age;
if(age < 6){
return "我還是個(gè)寶寶";
}else if(age < 18){
return "我還是個(gè)少年";
}else{
//……
}
}
}
示例3 實(shí)現(xiàn)詞語(yǔ)接龍游戲拼接，依賴上次的拼接結(jié)果 胸有成竹 -> 竹報(bào)平安 -> 安富尊榮 在線效果
wordschain("胸有成竹")("竹報(bào)平安")("安富尊榮").valueOf()
function wordschain(word){
var words = word;
function chain(word){
words += " -> " + word;
return chain; //操作對(duì)象本身
}
// valueOf 對(duì)象原始值chain [了解更多][5]
chain.valueOf = function(){
return words;
}
return chain;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89515.html
摘要：說(shuō)白了，就是給聲明的添加一個(gè)包含空的對(duì)象，再由函數(shù)返回這個(gè)空。如此構(gòu)成一個(gè)層層包裹的鏈。四首先本質(zhì)是一個(gè)遞歸函數(shù)，結(jié)束條件是，即終止到未掛載對(duì)象的子為止。可以看到這個(gè)函數(shù)的作用就是根據(jù)屬性逐個(gè)觸發(fā)鏈中的或函數(shù)。 背景 Promise是一種非常實(shí)用的異步編程方案，本文對(duì)于Promise源碼的分析可以增進(jìn)讀者對(duì)于Promise原理的理解，以后不再害怕異步編程，不用擔(dān)心callback he...
摘要：函數(shù)會(huì)在之后的某個(gè)時(shí)刻觸發(fā)事件定時(shí)器。事件循環(huán)中的這樣一次遍歷被稱為一個(gè)。執(zhí)行完畢并出棧。當(dāng)定時(shí)器過(guò)期，宿主環(huán)境會(huì)把回調(diào)函數(shù)添加至事件循環(huán)隊(duì)列中，然后，在未來(lái)的某個(gè)取出并執(zhí)行該事件。 原文請(qǐng)查閱這里，略有改動(dòng)。 本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。 這是 JavaScript 工作原理的第四章。 現(xiàn)在，我們將會(huì)通過(guò)回顧單線程環(huán)境下編程的弊端及如何克服這些困難以創(chuàng)建令人驚嘆...
摘要：本文會(huì)以引出問(wèn)題為主，后面有時(shí)間的話，筆者陸續(xù)會(huì)抽些重要的知識(shí)點(diǎn)進(jìn)行詳細(xì)的剖析與解答。敬請(qǐng)關(guān)注服務(wù)端思維微信公眾號(hào)，獲取最新文章。 原文地址：梁桂釗的博客博客地址：http://blog.720ui.com 這里，筆者結(jié)合自己過(guò)往的面試經(jīng)驗(yàn)，整理了一些核心的知識(shí)清單，幫助讀者更好地回顧與復(fù)習(xí) Java 服務(wù)端核心技術(shù)。本文會(huì)以引出問(wèn)題為主，后面有時(shí)間的話，筆者陸續(xù)會(huì)抽些重要的知識(shí)點(diǎn)進(jìn)...
摘要：在上家公司裸辭之后，經(jīng)過(guò)一段時(shí)間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現(xiàn)將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁(yè)和后端分頁(yè)優(yōu)缺點(diǎn)。包含多個(gè)子節(jié)點(diǎn)及孫節(jié)點(diǎn)，遍歷。 在上家公司裸辭之后，經(jīng)過(guò)一段時(shí)間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現(xiàn)將面試題整理一下： es6 ...
閱讀 746·2021-11-23 09:51
閱讀 2446·2021-10-11 11:10
閱讀 1317·2021-09-23 11:21
閱讀 1100·2021-09-10 10:50
閱讀 897·2019-08-30 15:54
閱讀 3337·2019-08-30 15:53
閱讀 3296·2019-08-30 15:53
閱讀 3196·2019-08-29 17:23
