粗解js链式函数

2023-12-26 08:58

文章标签 函数 js 粗解链式

本文主要是介绍粗解js链式函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

链式调用

在codewars里做到链式函数的题目（codewars:js实现5kyu:A Chain adding function）之前，如果在面试的时候面试官让我实现add(1)(2)(3)(4)= 10，我应该是一点头绪都没有，然后羞愧的说一句：不好意思这个我不怎么会…最后‘完美’的挂掉面试，over。

在了解过程中我发现，其实链式调用我用的还是挺多的，比如在jQuery中经常会用到 $('#div').show().find('a').hide().end().css('color','#fff')
那么它是怎么实现的呢，原理其实挺简单的，就是jQuery节点在调用API之后它都会返回这个节点自身，比如：

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

到这里，我算对js的链式调用有了一点了解。

链式函数

那么，先不考虑结果，我要让add(1)(2)(3)(4)能执行的话，每一个函数执行完都应该返回一个函数，并且是返回同一个函数，这样才能形成链式，所以我完成codewars的代码雏形是这样的：

function add (num) {// var sum = function(){return sum;}return sum
}

综合题目的意思，add(1)(2)(3)(4)=10是要把每一个调用函数传入的参数求和:

function add (num) {// var count = num;var sum = function(num2){count += num2;return sum;}return sum
}

最后最重要的一点就是，要输出求和的结果，也就是count的值。在这里最后能够正确输出10的原理是：sum是Function，当我们进行某些操作时会（比如判断相等时）会自动调用其valueOf方法，所以要重写它的valueOf方法，让其返回count。

function add (num) {// 1var count = num;var sum = function(num2){ // 2,3......count += num2;return sum}sum.valueOf = function(){return count  // return both a function and a value}return sum
}