第13题- 链式调用和argument

面试题目(头条)：

设计一个sum函数，使其知足如下要求

sum(1, 2).sumOf() // 返回 3

sum(1, 2)(3).sumOf() // 返回 6

sum(1)(2, 3, 4).sumOf() // 返回 10

sum(1, 2)(3, 4)(5).sumOf() // 返回 15

答案解析：

这道题目主要考察如下两点：

1. 函数参数 arguments 的应用；
2. 函数的链式调用实现；

arguments

arguments对象是函数(非箭头)内部均可以访问到的局部变量，该对象是一个类数组对象，具备数组的length，索引特性。

function print () {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments.length); // 3
}

print(1, 2, 3);


// 利用arguments的索引特性，call、apply函数，可使用数组的方法
Array.prototype.shift.call(arguments);


// 将arguments转为数组，Array参数为一个，而且是整数时，表示数组长度，超过一个时表示数组元素
var args = arguments.length == 1 ? [arguments[0]] : Array.apply(null, arguments);
复制代码

链式编码原理

链式调用原理就是做用域链，实现须要作以下的工做：

1. 由于须要链式调用，因此须要返回对象自己的引用；
2. 利用闭包，存储累计值，以便最后返回；

示例：

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的目的；

综上，咱们的面试题目，就能够作以下实现：

function sum () {
    var ary = [].slice.apply(arguments); 
    var fn = function () {
        ary = ary.concat([].slice.apply(arguments));
        return fn;
    }

    fn.sumOf = function () {
        return ary.reduce((pre, cur) => {
            return pre + cur;
        })
    }
    return fn;
}
复制代码

1. 利用闭包，设置变量ary存储函数链式调用期间的全部参数；
2. 自定义内部函数，调用时返回自身；
3. 定义fn的静态方法sumOf，用于计算数组ary的参数和；

下面是我实现的另外一种方式，但须要设置一个函数静态变量值存储数据：

function sum() {
    let s = 0;
    for(let i = 0; i < arguments.length; i++) {
        s += arguments[i];
    }
    sum.result += s;
    return sum;
}

sum.result = 0;

sum.sumOf = function () {
    let temp = sum.result;
    sum.result = 0;
    return temp;
}
复制代码

以上两种实现方式，涉及的知识点基本同样，欢迎读者留言其余实现方式。

---

扫一扫 关注个人公众号【前端名狮】，更多精彩内容陪伴你！