underscore 系列之内部函数 restArgs

[mqyqingfeng]

partial

在《 JavaScript 专题之偏函数》中，我们写了一个 partial 函数，用来固定函数的部分参数，实现代码如下：

// 这是文章中的第一版
function partial(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        var newArgs = args.concat([].slice.call(arguments));
        return fn.apply(this, newArgs);
    };
};

rest parameter

ES6 为我们提供了剩余参数（rest parameter）语法，允许我们将一个不定数量的参数表示为一个数组。

function fn(a, b, ...args) {
   console.log(args); // [3, 4, 5]
}

fn(1, 2, 3, 4, 5)

我们可以利用这一特性简化 partial 实现的代码：

function partial(fn, ...args) {
    return function(...partialArgs) {
        var newArgs = args.concat(partialArgs);
        return fn.apply(this, newArgs);
    };
};

写个 demo，测试一下：

function add(a, b) {
    return a + b;
}

var addOne = partial(add, 1);

console.log(addOne(2)); // 3

restArgs

如果不使用 ... 拓展操作符，仅用 ES5 的内容，该怎么实现呢？

我们可以写一个 restArgs 函数，传入一个函数，使用函数的最后一个参数储存剩下的函数参数，使用效果如下：

var func = restArgs(function(a, b, c){
    console.log(c); // [3, 4, 5]
})

func(1, 2, 3, 4, 5)

我们来写一版：

// 第一版
function restArgs(func) {
    return function(){
        // startIndex 表示使用哪个位置的参数用于储存剩余的参数
        var startIndex = func.length - 1;
        var length = arguments.length - startIndex;

        var rest = Array(length)
        var index = 0;

        // 使用一个数组储存剩余的参数
        // 以上面的例子为例，结果为：
        // rest [3, 4, 5]
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex]
        }

        // args [1, 2, undefined]
        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index]
        }

        // args [1, 2, [3, 4, 5]]
        args[startIndex] = rest;

        return func.apply(this, args)
    }
}

优化

我们默认使用传入的函数的最后一个参数储存剩余的参数，为了更加灵活，我们可以再增加一个参数，用来指定 startIndex，如果没有指定，就默认使用最后一个参数。

此外，注意，我们使用 Array(length) 创建数组，而 length 的计算方式是 arguments.length - startIndex，这个值有可能是负数！比如：

var func = restArgs(function(a, b, c, d){
    console.log(c) // 报错
})

func(1, 2)

所以我们再写一版：

// 第二版
function restArgs(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function(){
        var length = Math.max(arguments.length - startIndex, 0);
        var rest = Array(length)
        var index = 0;
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex]
        }

        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index]
        }

        args[startIndex] = rest;
        return func.apply(this, args)
    }
}

性能优化

如果是正常写业务，可能写到这里就结束了，然而 underscore 考虑的更多，鉴于 call 的性能要高于 apply，所以 underscore 做了一个优化：

// 第三版
var restArgs = function(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function() {
        var length = Math.max(arguments.length - startIndex, 0),
            rest = Array(length),
            index = 0;

        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex];
        }

        // 增加的部分
        switch (startIndex) {
            case 0:
                return func.call(this, rest);
            case 1:
                return func.call(this, arguments[0], rest);
            case 2:
                return func.call(this, arguments[0], arguments[1], rest);
        }

        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index];
        }

        args[startIndex] = rest;
        return func.apply(this, args);
    };
};

至此，restArgs 函数就完成了，underscore 很多函数比如 invoke、without、union、difference、bind、partial、bindAll、delay 都用到了 restArgs 函数。

当使用 underscore 的时候，我们可以以 _.restArgs 的形式调用该函数。

restArgs 与 partial

最后，使用我们的写的 restArgs 函数重写下 partial 函数：

var partial = restArgs(function(fn, args){
    return restArgs(function(partialArgs) {
        var newArgs = args.concat(partialArgs);
        return fn.apply(this, newArgs);
    })
})

function add(a, b, c) {
    return a + b + c;
}

var addOne = partial(add, 1);
console.log(addOne(2, 3)); // 6

underscore 系列

underscore 系列目录地址：https://github.com/mqyqingfeng/Blog。

underscore 系列预计写八篇左右，重点介绍 underscore 中的代码架构、链式调用、内部函数、模板引擎等内容，旨在帮助大家阅读源码，以及写出自己的 undercore。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

[mqyqingfeng]

用作更新日志

[zhouyingkai1]

支持一下 顺便问下博主 什么时候会写下react系列吗

[mqyqingfeng]

@zhouyingkai1 写完 underscore 系列，写 ES6 系列，ES6 系列后就是 React 系列，等到 React 系列，估计要到春节后啦……

[zhouyingkai1]

@mqyqingfeng 给你点赞 养肥了再看， 正好把前面的再复习几遍

[wy1009]

我这几天也在看underscore源码，为了防止自己以为自己懂了但是没懂，看懂了之后还会自己写一遍，或者懒得看了干脆自己写一个能通过测试用例的，算是半抄半写。可是让我写相关博客的话，我可以说是完全没有头绪的，知道是那么回事，那就是那么回事，怎么都无法像博主一样写出这样循序渐进的博客……这是别人的天赋吗……好羡慕，对自己产生怀疑……

[mqyqingfeng]

@wy1009 虽然我是最近才开始写的 underscore 系列，但是我并不是最近才开始看的哦~ 实际上半年前，我就已经开始阅读 underscore 源码了，也是有很多的问题啦，都是一点一点啃的，文章中的很多知识点其实在当时就已经有一点了解了，只是因为现在写文章，所以会梳理的更加细致而已。

所以其实我是在粗略的读完源码后又去细致的梳理了一下而已，当你再回顾的时候，其实哪些是难点，哪些是有必要讲讲的，心里还是有点底的，所以只用列出要写的课题，然后逐个写就可以了。

想必你是最近才开始看的 underscore ，所以不用怀疑自己哈，等你看完再回过头来看，一定也有同样的感受，正所谓“不识庐山真面目，只缘身在此山中”呀，加油哈~ (๑•̀ㅂ•́)و✧

[sukilris]

智商不够真是艰难啊，楼主请问一下既然partial函数已经实现了固定函数的部分参数的效果为什么还要写一个这么复杂的restArgs？看了很多遍都不明白，希望能解答下

[delayk]

@sukilris restArgs部分第一句就写了原因 “如果不使用 ... 拓展操作符，仅用 ES5 的内容，该怎么实现呢？”

[sukilris]

@delayk 不对啊，partial函数不是已经使用es5实现了固定部分参数的效果了吗，上面一个resetArgs使用es6实现了，下面为什么要用一个这么复杂的方法实现，不弄明白这一点的话，我就有点看不懂，恕我愚钝

[gnehcwu]

在想第二，三版的restArgs实现里, check startIndex的时候用

startIndex = startIndex === undefined ? func.length - 1 : +startIndex;

可能更准确一些？

[realheng]

@gnehcwu startIndex == null 既可以排除undefined又可以排除null，还可以避免undefined被重写

[realheng]

@sukilris 我自己的想法哈，因为partial只能实现第一个参数后面的所有参数一起固定，而如果你想实现(a,b,c,...args)这种除了前三个参数，后面n个参数一起固定的方法partial是实现不了的。

[realheng]

如果是使用es5的方法的话，partial是实现不了的，所以要用restArgs这种方法

[xiaochengzi6]

太棒了，读了三遍，才发现我自己由于没认真看导致缺字漏字引发的（内容/代码）不理解从而浪费了很多时间，读文章，尤其是技术文章要认真的品每句话才行

// 核心思想：
// ----------0, 1, 2, 3, 4, 5
// arguments(a, b, c, d, e, f)
// ----------0, 1, 2, startIndex(3), 4, EndIndex(5)

// rest ==> [startIndex, ...., EndIndex]
// args ==> [0, 1, 2, rest]

// 最后: return fn.apply(this, args)

[xiaochengzi6]

太棒了，读了三遍，才发现我自己由于没认真看导致缺字漏字引发的（内容/代码）不理解从而浪费了很多时间，读文章，尤其是技术文章要认真的品每句话才行

// 核心思想：
// ----------0, 1, 2, 3, 4, 5
// arguments(a, b, c, d, e, f)
// ----------0, 1, 2, startIndex(3), 4, EndIndex(5)

// rest ==> [startIndex, ...., EndIndex]
// args ==> [0, 1, 2, rest]

// 最后: return fn.apply(this, args)