JS 鏈式呼叫 原理及實踐

一、鏈式編碼

好處同一物件多次其屬性或方法的時候，我們需要多次書寫物件進行「.」 或 () 操作；鏈式呼叫是一種簡化此過程的一種編碼方式，使**簡潔、易讀。

舉個栗子（深刻不是很貼切的）：日常餐廳取餐，通常我們一次拿取想要的食物一起結賬，如果每樣食物要分開取餐結賬估計內心的草泥馬要躁動起來了。

常用場景

#jquery的dom操作

$('select').on('click', callback)
.on('change', callback);

#gulp編譯

gulp.src('/path/to/**.less')
.pipe(less())
.pipe(cssmin())

二、鏈式編碼的原理

鏈式呼叫原理就是作用域鏈；實現需要做的工作；

物件方法的處理 （操作方法）

處理完成返回物件的引用（操作物件）

第2步鏈式實現的方式：

<1> this的作用域鏈，jquery的實現方式；【示例1】

<2> 返回物件本身, 同this的區別就是顯示返回鏈式物件；【示例2】

<3> 閉包返回物件通過呼叫覆蓋valueof方法實現，***獲取結果需要呼叫valueof;（此種方法適用於操作方法有相互依賴的情況下使用）【示例3】

person.set(10).get(); // 我還是個少年

var person = function() {};

person.prototype.set = function (age)
person.prototype.get = function ()else if(age < 18)else
}var person = new person();
person.set(10).get(); // '我還是個少年'

var person = ,

get: function ()else if(age < 18)else
}}

wordschain('胸有成竹')('竹報平安')('安富尊榮').valueof()

function wordschain(word)

chain.valueof = function()
return chain;
}

js鏈式呼叫

我們都很熟悉jquery了，只能jquery中一種非常牛逼的寫法叫鏈式操作 div css background ccc removeclass box stop animate 那這是如何實現的呢，我自己寫了個例子 並非jquery原始碼 ferrinte.prototype.show funct...

JS簡單鏈式呼叫

jquery裡面一些方法就是通過鏈式呼叫的 map items 遍歷的陣列的每一項 var arr 1,2,3 var num arr.map function items console.log num 2,3,4 var arr 1,2,3 var num arr.map function it...

jquery中鏈式呼叫原理

1 鏈式呼叫 mybtn css width 100px css height 100px css background red 2 在對屬性進行操作時建議使用json形式控制樣式 mybtn css 3 事件中this的指向 事件中this的指向 jquery中提示了乙個方法,該方法可以將原生js...