资讯专栏INFORMATION COLUMN

underscore 系列之内部函数 restArgs

zzzmh / 2469人阅读

摘要:与最后,使用我们的写的函数重写下函数系列系列目录地址。系列预计写八篇左右,重点介绍中的代码架构链式调用内部函数模板引擎等内容,旨在帮助大家阅读源码,以及写出自己的。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。

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,对作者也是一种鼓励。

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

转载请注明本文地址:https://www.ucloud.cn/yun/90212.html

相关文章

  • underscore 的源码该如何阅读?

    摘要:所以它与其他系列的文章并不冲突,完全可以在阅读完这个系列后,再跟着其他系列的文章接着学习。如何阅读我在写系列的时候,被问的最多的问题就是该怎么阅读源码我想简单聊一下自己的思路。感谢大家的阅读和支持,我是冴羽,下个系列再见啦 前言 别名:《underscore 系列 8 篇正式完结!》 介绍 underscore 系列是我写的第三个系列,前两个系列分别是 JavaScript 深入系列、...

    weknow619 评论0 收藏0
  • 窥探Underscore源码系列-开篇

    摘要:他指示了一个对象的属性,返回的将用来获得该属性对应的值在上面的分析中,我们知道,当传入的是一个函数时,还要经过一个叫的内置函数才能获得最终的所以此处的必然是优化回调的作用了。 开篇说明 对的,让你所见,又开始造轮子了。哈哈,造轮子我们是认真的~ 源码阅读是必须的,Underscore是因为刚刚学习整理了一波函数式编程,加上自己曾经没有太多阅读源码的经验,先拿Underscore练练手,...

    zorpan 评论0 收藏0
  • 1625行,解开 underscore.js 的面纱 - 第五章

    摘要:对多个一维数组进行并运算,实际上就是加强版的。所以我要说的是这个函数,将传入参数转换为一个数组进行到的回调函数中,以此达到函数接到的是一个一维数组的集合。 每次小章节的开题都烦恼写什么好,所以直接接下文 (~o▔▽▔)~o o~(▔▽▔o~) 。 _.first = _.head = _.take = function(array, n, guard) { if (arra...

    Rango 评论0 收藏0
  • 1625行,解开 underscore.js 的面纱 - 第六章

    摘要:用来构成和两个函数,主要针对的是为了将函数调用模式更改为构造器调用和方法调用。通过函数设定时间为毫秒后执行函数的回调函数,用以达到在规定时间毫秒时执行函数的目的,并且规定时间内只执行一次函数。 北京的雨已经断断续续下了好久,昏昏欲睡的躲在家里不愿意出门,火影忍者快要结束了,一拳超人第二季据说还要等好多年,勇者大冒险貌似断更了,我又是在不喜欢海贼王的画风,所以,我该看什么好呢。 va...

    v1 评论0 收藏0
  • 1625行,解开 underscore.js 的面纱 - 第二章

    摘要:第四个判断如果是对象执行返回一个断言函数,用来判定传入对象是否匹配指定键值属性。都不匹配最后执行,返回传入的对象的属性。设置的值并生成函数,等同于,使具有属性且有值则返回,否则返回,这是一个判断函数。 在第二小章节里面我按照源码顺序介绍几个方法,源码紧接着第一章继续: var builtinIteratee; builtinIteratee,内置的 Iteratee (迭代器)。...

    yuxue 评论0 收藏0

发表评论

0条评论

zzzmh

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<