javaScript鏈式調用原理以及加法實現

LuDongWei 發布于2019-08-20 15:10 / 1611人閱讀

摘要：相信很多小伙伴在面試的過程中都被問過鏈式調用的原理，甚至有些面試官還會讓你用其實現例如加法操作，舉例第一次看到這個題目時，或許你沒有什么頭緒，不要緊，讓我們慢慢來首先，大家還是否記得在使用時，我們會經常這樣去操作一個節點這是怎么做到的原理很

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

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

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

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

這是怎么做到的？原理很簡單：就是jQuery節點在調用api后都會返回節點自身，類似于：

var Obj = {
    a: 1,
    func: function(){
        this.a += 1;
        return this
    }
}
Obj.func().func();
console.log(Obj.a);    //3

現在大致理解了鏈式調用的原理了吧！然后我們再來看如何實現文章開頭的題目；首先我們來分析一下有哪幾點是我們需要注意的：

add函數在后續的鏈式調用時，應該記錄之前的加和，如何實現？

add函數在每次調用后既要保留自身的引用，又要返回操作結果，如何實現？

先上代碼，然后我們逐一分析

function add (num) {
    var count = num;
    var _b = function(l){
        count += l;
        return _b
    }
    _b.valueOf = function(){
        return count
    }
    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的目的

結語
以上就是我對鏈式調用的一個粗略認識，有些概念可能表達的不是很清晰；其實樓主的目的就是想引導大家去研究一下鏈式調用所涉及到的一些js知識，不喜請輕噴O(∩_∩)O哈哈~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82051.html

從 ++[[]][+[]]+[+[]]==10? 深入淺出弱類型 JS 的隱式轉換

摘要：與此相對，強類型語言的類型之間不一定有隱式轉換。三為什么是弱類型弱類型相對于強類型來說類型檢查更不嚴格，比如說允許變量類型的隱式轉換，允許強制類型轉換等等。在中，加性運算符有大量的特殊行為。從++[[]][+[]]+[+[]]==10?深入淺出弱類型JS的隱式轉換本文純屬原創? 如有雷同? 純屬抄襲? 不甚榮幸! 歡迎轉載！原文收錄在【我的GitHub博客】，覺得本文寫的不算爛的...

miya 2019-08-20 14:46 評論0 收藏0
JS函數式編程 - 函數組合與柯里化

摘要：而在函數式編程中方法是獨立于數據的，我們可以把上面以函數式的方式在寫一遍你肯定會說，你是在逗我。對比兩個生成新函數的過程，沒有柯里化的相對而言就有一點啰嗦了。我們都知道單一職責原則，其實面向對象的SOLID中的S(SRP, Single responsibility principle)。在函數式當中每一個函數就是一個單元，同樣應該只做一件事。但是現實世界總是復雜的，當把現實世界映射...

MingjunYang 2019-08-23 12:19 評論0 收藏0
JavaScript標準庫系列——三大包裝對象（四）

摘要：目錄導語包裝對象的理解三大包裝對象的知識點小結導語包裝對象是為了彌補基本數據類型的非對象特性而產生的，對于基本類型值而言，本來是不存在屬性和方法的，但是我們可以在使用字面量創建字符串時，調用例如的方法，那么其內在原理究竟是什么呢閱讀完本篇文目錄導語 1. 包裝對象的理解 2. 三大包裝對象的知識點 3. 小結導語包裝對象是為了彌補基本數據類型的非對象特性而產生的，對于基本類型...

sean 2019-08-21 11:27 評論0 收藏0
javaScript鏈式調用

摘要：通過實現鏈式調用來理解鏈式調用是我們平常經常會用到，比如中的還有中的。直接用一個匿名函數返回一個的對象，然后賦值給并掛載到全局上，這樣就實現了一個的鏈式調用了。通過實現鏈式調用來理解 ?? 鏈式調用是我們平常經常會用到，比如JQuery中的$(id).eq(0), 還有lodash中的_.chain().push()。這些都是平常會用到的，但是都是已經封裝好的，我們知道用起來很方便...

boredream 2019-08-23 13:51 評論0 收藏0
JavaScript類型轉換原理

摘要：其實這三個函數不僅僅可以當作構造函數，它們可以直接當作普通的函數來使用，將任何類型的參數轉化成原始類型的值其實這三個函數用于類型轉換的時候，調用的就是內部的方法這里解釋一下的過程執行執行內部函數執行因為不是原始類型，進入下一步。本文修改自本人以前寫的文章。從類型說起 js只有7種類型：原始類型（primitives types） boolean number 包括Infi...

lewif 2019-08-23 11:43 評論0 收藏0