虽然Underscore并没有在API手册中提及到restArgs函数,我们仍然可以通过_.restArgs接口使用restArgs函数。如果不去阅读源码,我们很难发现Underscore中还有这样的一个函数,对于这样的一个“没有存在感”的函数,我们为什么要使用并学习它呢?

这个函数虽然比较“低调”,但是它在Underscore中的存在感却一点也不低。在Underscore源码中,restArgs函数作为工具函数,参与多个公开API的实现,可谓劳苦功高。从其多次参与实现公开API可以看出,这是一个十分重要的函数,为了方便讲解后面的公开API,这里专门写一篇文章介绍restArgs工具函数。

为什么我们需要restArgs?

在现实中,我们可能有碰到过一些特殊情况,比如我们所写的函数不确定有多少个要传递的参数,这样在函数内部实现参数处理时就会比较棘手。

比如现在我们需要构建一个函数,这个函数接受至少两个参数,第一个是一个数组对象,第二个之后是一些值,我们的函数就需要把这些值添加到第一个参数的尾部。

代码实现:

function appendToArray(arr) {
if(arguments.length < 2)
throw new Error('funciton a require at least 2 parameters!');
return arr.concat(Array.prototype.slice.call(arguments, 1));
}

  

现在我们需要实现另一个函数,该函数也是把参数附加到数组中,不过实现了过滤器功能,比如只把大于1的参数附加到数组中。

代码实现:

function appendToArrayPlus(arr, filter) {
if(arguments.length < 3)
throw new Error('function a require at least 3 parameters!');
var params = Array.prototype.slice.call(arguments, 2);
for(var i = 0; i < params.length; i++) {
if(filter(params[i])) {
arr.push(params[i]);
}
}
return arr;
}

  

可以看出来,我们在开发这两个函数时,做了重复的工作,那就是根据多余参数的开始序号来截断arguments对象。

这样的做法,在写一两个函数时没有什么问题,但是在开发框架时,需要写大量的参数个数不确定的函数,这就会使得冗余代码大量增加,并且多次直接操作arguments对象的做法并不十分优雅。

所以我们需要一个restArgs这样的工具函数,给它传递一个函数以及一个多余参数开始索引(startIndex)作为参数,它会返回一个函数,我们在调用返回的函数时,开始索引之后的多余参数会被放入到数组中,然后一并传递给restArgs的第一个参数函数调用(作为最后一个参数)。

有人会说,ES6中已经实现了rest params的功能,参考阮老师教程,但是我们知道一个框架的开发,必须考虑到兼容问题,很多低端浏览器并未实现ES6语法。所以在Underscore中,暂时还未使用ES6语法。

Underscore的实现

Underscore实现的源码(附注释):

// Similar to ES6's rest param (http://ariya.ofilabs.com/2013/03/es6-and-rest-parameter.html)
// This accumulates the arguments passed into an array, after a given index. //restArgs用于把func的位于startIndex之后的参数归类为一个数组,
//然后返回一个函数把这个数组结合startIndex之前的参数传递给func调用。
var restArgs = function (func, startIndex) {
//function.length表示function定义时,形式参数的个数。
//注意此处是func.length,即传入的方法参数的形参个数而不是当前函数的参数个数,需要结合具体传入的参数来看。
//当startIndex参数未传递时,默认func函数的最后一个参数开始为多余参数,会被整合到数组中。
startIndex = startIndex == null ? func.length - 1 : +startIndex;
return function () {
//length表示构造的多余参数数组的长度,是实际的多余参数或者0。
var length = Math.max(arguments.length - startIndex, 0),
rest = Array(length),
index = 0;
//新建了一个rest数组,把位于startIndex索引之后的所有参数放入该数组。
for (; index < length; index++) {
rest[index] = arguments[index + startIndex];
}
//将多余参数放入rest数组之后,直接用Function.prototype.call执行函数。
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);
}
//如果startIndex > 2,那么使用apply传递数组作为参数的方式执行func。
//虽然调用方法发生了变化,但是还是会把rest数组放在传入的参数数组的最后。
//这样做其实与之前的方法无异(switch部分可以删除),但是call的效率高于apply。 //args数组用于盛放startIndex之前的非多余参数。
var args = Array(startIndex + 1);
for (index = 0; index < startIndex; index++) {
args[index] = arguments[index];
}
args[startIndex] = rest;
return func.apply(this, args);
};
};

  

可以注意到两个重点:

  • 1 startIndex默认为func函数的形参个数减1,那么代表的含义就是当我们调用restArgs函数不传递第二个参数时,默认从最后一个形参开始即为多余参数。

    比如:

      _.invoke = restArgs(function (obj, path, args) {...});
    _.invoke(obj, path, 1, 2, 3);

      

    以上代码中,如果我们给_.invoke传递这些参数,那么实际上执行的函数会是:

    function(obj, path, [1, 2, 3]) {
    // ...
    }

      

    这样我们就可以在写函数_.invoke时,很方便的预处理args数组。

  • 2 switch中的内容只是后面func.apply(this, args)的一个特例,不写switch也完全可以实现功能,但是之所以要写这个switch,是因为Function.prototype.call的效率要高于Function.prototype.apply(具体请参考:Why is call so much faster than apply?)。

结语

学习完这个内部函数之后,再学习其他API源码时,就会好理解许多,我们需要重点注意的一点就是当restArgs只接受一个函数作为参数时,表示默认从接受的最后一个参数开始(包括最后一个参数)即为多余参数。

其余Underscore源码解读文章:GitHub

理解Underscore中的restArgs函数的更多相关文章

  1. 理解Underscore中的节流函数

    上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...

  2. 理解Underscore中的flatten函数

    最近是在所在实习公司的第一个sprint,有个朋友又请假了,所以任务比较重,一直这么久都没怎么更新了,这个周末赖了个床,纠结了一会儿决定还是继续写这个系列,虽然比较乏味,但是学到的东西还是很多的. 之 ...

  3. 理解Underscore中的uniq函数

    uniq函数,是Underscore中的一个数组去重函数,给它传递一个数组,它将会返回该数组的去重副本. 1 ES6版本去重 在ES6版本中,引入了一个新的数据结构——set,这是一种类似数组的数据结 ...

  4. 理解Underscore中的_.bind函数

    最近一直忙于实习以及毕业设计的事情,所以上周阅读源码之后本周就一直没有进展.今天在写完开题报告之后又抽空看了一眼Underscore源码,发现上次没有看明白的一个函数忽然就豁然开朗了,于是赶紧写下了这 ...

  5. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  6. 理解javascript中的回调函数(callback)【转】

    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...

  7. 理解Underscore中的_.template函数

    Underscore中提供了_.template函数实现模板引擎功能,它可以将JSON数据源中的数据对应的填充到提供的字符串中去,类似于服务端渲染的模板引擎.接下来看一下Underscore是如何实现 ...

  8. 理解javascript中的回调函数(callback)

    以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...

  9. 再次理解js中的call函数

    a.call(b); 网上说明的版本比较多.有的说,是指针替换.有说,将a对象的方法加在b对象执行.官方说:什么对象替换什么对象.反正看了几个版本,尽管有具体的实例,看了我三次都没看懂它的具体含义.看 ...

随机推荐

  1. 快手、抖音、微视类短视频SDK接入教程,7步就能搞定

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由视频咖 发表于云+社区专栏 终端部分 按照如下三步操作,可以用 XCode 或者 Android Studio 编译和调试小视频 Ap ...

  2. 腾讯云AI平台张文杰:构建一站式机器学习服务平台

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 5月24日,以"无界数据无限智能"为主题的腾讯"云+未来"峰会AI大数据分论坛在广州拉开帷幕.此次分 ...

  3. CentOS 6.9安装docker之前升级系统内核版本

    问题描述:安装docker,官方文档要求Linux kernel至少3.8以上,且docker只能运行在64位的系统中(这个很重要,搞了个i386的系统升级了半天没成功) 升级步骤: 1.因位安装服务 ...

  4. The Internet Communications Engine (Ice) 跨平台异构通讯方案 第二弹-Hello world!

    如果不知道ICE是什么的同学,请看上一篇的ICE简介:http://www.cnblogs.com/winds/p/3864677.html 好了,HelloWorld,从中间语言讲起. 首先,我们新 ...

  5. JRebel - 给IDE安装JRebel插件

    JRebel对于很多人来说已经并不陌生了,一搜一大把. 用过JRebel后发现,这对于Java开发简直不可缺少. 尽管其价格有点春节国庆期间的各种交通费用——打劫! 即使如此也出现了有"分享 ...

  6. log4js日志

    安装log4js:npm install log4js express中配置log4js中间件: var log = require("./modules/utils/logUtil.js& ...

  7. Vue-[v-model]理解示例

    对应文档节点: https://vuefe.cn/v2/guide/components.html#Customizing-Component-v-model <body> <div ...

  8. 四、spring之DI

    Bean依赖容器,那容器如何注入Bean的依赖资源,Spring IOC容器注入依赖资源主要有以下两种基本实现方式: setert注入:通过setter方法进行注入依赖:参考代码HelloTest2 ...

  9. clean code 第一章笔记

    我们都曾有过这样的经历:自己写的烂程序竟然可以运行,然后就认为能运行的烂代码总比什么都没有强.还会有这样的想法:总有一天我会修改它.但是,LeBlanc(勒布朗)法则表示:稍后等于永不(Later e ...

  10. FWORK-数据存储篇 -- 范式与反模式 (学习和理解)

    理解 1.第二范式的侧重点是非主键列是否完全依赖于主键,还是依赖于主键的一部分.第三范式的侧重点是非主键列是直接依赖于主键,还是直接依赖于非主键列.  2. 反模式 范式可以避免数据冗余,减少数据库的 ...