相信不少小伙伴在面试的过程当中都被问过js链式调用的原理,甚至有些面试官还会让你用其实现例如加法操做,举例:css
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
如今大体理解了链式调用的原理了吧!而后咱们再来看如何实现文章开头的题目;首先咱们来分析一下有哪几点是咱们须要注意的:api
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的目的this
结语
以上就是我对链式调用的一个粗略认识,有些概念可能表达的不是很清晰;其实楼主的目的就是想引导你们去研究一下链式调用所涉及到的一些js知识,不喜请轻喷O(∩_∩)O哈哈~code