javaScript链式调用原理以及加法实现

LuDongWei 发布于2019-08-20 15:10 / 1459人阅读

摘要：相信很多小伙伴在面试的过程中都被问过链式调用的原理，甚至有些面试官还会让你用其实现例如加法操作，举例第一次看到这个题目时，或许你没有什么头绪，不要紧，让我们慢慢来首先，大家还是否记得在使用时，我们会经常这样去操作一个节点这是怎么做到的原理很

相信很多小伙伴在面试的过程中都被问过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哈哈~

云服务器海外云主机 java实现链式队列 python实现加法 java递归实现加法队列实现原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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