javaScript鏈式呼叫原理以及加法實現

相信很多小夥伴在面試的過程中都被問過js鏈式呼叫的原理，甚至有些面試官還會讓你用其實現例如加法操作，舉例：

add(1)(2)(3) //6

第一次看到這個題目時，或許你沒有什麼頭緒，不要緊，讓我們慢慢來；首先，大家還是否記得在使用jquery時，我們會經常這樣去操作乙個jquery節點

$("elem").show().css("color","red");

這是怎麼做到的？原理很簡單：就是jquery節點在呼叫api後都會返回節點自身，類似於：

var obj = 
}obj.func().func();
console.log(obj.a);    //3

add函式在後續的鏈式呼叫時，應該記錄之前的加和，如何實現？

add函式在每次呼叫後既要保留自身的引用，又要返回操作結果，如何實現？

先上**，然後我們逐一分析

function add (num) 
_b.valueof = function()
return _b
}var c = add(1)(2)(3);
console.log(c)    //6

下面我們來詳細分析一下**：

1.首先，在add方法內部，我們是通過私有的_b方法實現的加法，而不是在add方法自身實現的，這裡涉及到了函式式程式設計，這個概念我們就不在此做展開了，有興趣的童鞋可以自己研究一下，可以說這是一種很不錯的開發模式；add第一次執行後，返回了_b方法

2.在返回的_b方法中我們形成了對count的閉包，這樣我們可以實現累計加和；還有一點需要注意，就是_b方法每次執行時都返回了它自身，這就實現了鏈式

3.最後，也是比較關鍵的，就是在輸出add的結果，即add(1)(2)(3)的結果時，如何讓它輸出count，這裡涉及了valueof和tostring方法的知識，還是那句話，感興趣的童鞋可以自己研究一下；在這裡最後能夠正確輸出6的原理是：_b是function，是object的一種特殊形式，當我們做類似列印console等操作時，會自動呼叫其valueof方法（其實底層實現沒有我說的這麼簡單，哈哈，但是大概是這麼個意思），所以我們重寫了valueof方法來達到返回count的目的

javaScript鏈式呼叫原理以及加法實現

Javascript鏈式呼叫案例

Javascript鏈式呼叫案例

javascript鏈式運動框架

javaScript鏈式呼叫原理以及加法實現

Javascript鏈式呼叫案例

Javascript鏈式呼叫案例

javascript鏈式運動框架

相關推薦