文档章节

js中的可变参数

AntMoon
 AntMoon
发布于 2016/03/21 15:54
字数 2225
阅读 22
收藏 0

每天成长一点,多年以后你会发现你很牛。



使用javascript类库函数时,经常会遇到一个函数,可以使用不同个数的参数的情况

比如:exp(var1) exp(var1, var2)

但是在实际编写javascript函数时,

函数不能同名,所以不可能是不同参数个数分开写;

参数个数必须符合函数的设置,所以函数声明里有的就必须有,不可能调用时写少几个;

……

这个问题是困扰了很久了,一直不知道为什么?!

今天一早在看别人代码,无意中竟然看到了~

 

原来不是在函数声明中声明参数个数,而是在函数里直接接收使用那怎么接收呢?

就是 arguments 了

arguments虽然不是数组,但可以当作数组使用,下标由 0 开始,所以:

arguments[0] 表示接收的第一个参数
arguments[1] 表示接收的第二个参数
……如此类推……

这样就可以实现不同参数调用同一个函数了~

当然,前提是函数设置了对该参数的处理方法,不然还是白搭

顺便搜索了一下arguments的介绍,一并贴出:
引用内容 引用内容
arguments 属性
为当前执行的 function 对象返回一个arguments 对象。

function.arguments

function 参数是当前执行函数的名称,可以省略。

说明
通过 arguments 属性,函数可以处理可变数量的参数。 arguments 对象的 length 属性包含了传递给函数的参数的数目。对于arguments 对象所包含的单个参数,其访问方法与数组中所包含的参数的访问方法相同。

示例
下面的例子说明了 arguments 属性的用法:

function ArgTest(){
    var i, s, numargs = arguments.length;
    s = numargs;
    if (numargs < 2)
        s += " argument was passed to ArgTest. It was ";
    else
         s += " arguments were passed to ArgTest. They were " ;
    for (i = 0; i < numargs; i++)
{
s += arguments[i] + " ";
}
return(s);
}

 

巧用arguments

    在 Javascript 的函数中有个名为 arguments 的类数组对象。它看起来是那么的诡异而且名不经传,但众多的 Javascript 库都使用着它强大的功能。所以,它的特性需要每个 Javascript 程序员去熟悉它。

    在每个函数中,都有个名为 arguments 的变量,它以类似数组的形式保存了当前调用的参数。而它实际上并不是个数组,使用 typeof arguments 语句尝试会返回“object”(对象),所以它不能像 Array 一样使用 push 和 pop 等方法。即便如此,仍然可以使用下标以及长度属性(length)获取它的值。

编写灵活的函数
   虽看起来名不经传,但的确 arguments 是非常有用的对象。比如,你可以让函数处理不定数目的参数。在 Dean Edwards 写的 base2 库中,有个叫 format 的函数充分发挥了这一特性:

function format(string) {
    var args = arguments;
    var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
    return String(string).replace(pattern, function(match, index) {
       return args[index];
    });
};

   replace这个函数的第二个参数可以为一个函数,函数的第一个参数可以为匹配了的文本,第二个参数为第几个匹配的值,返回值为要进行替换的文本

   这个函数实现了模板替换,你可以在要动态替换的地方使用 %1 到 %9 标记,然后其余的参数就会依次替换这些地方。例如:format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");
   上面的脚本就会返回
"And the papers want to know whose shirt you wear" 。
   在这里需要注意的是,即便在 format 函数定义中,我们仅定义了个名为 string 的参数。而 Javascript 不管函数自身定义的参数数量,它都允许我们向一个函数传递任意数量的参数,并将这些参数值保存到被调用函数的 arguments 对象中。

 

转换成实际数组
   虽然 arguments 对象并不是真正意义上的 Javascript 数组,但是我们可以使用数组的 slice 方法将其转换成数组,类似下面的代码

var args = Array.prototype.slice.call(arguments);


call(obj,当前函数使用的参数列表)

   call 方法第一个参数为一个对象,这个传进去的对象将调用slice函数.因为arguments不是一个数组,所以不能直接调用slice方法,所以只能使用 ''对象冒充''方法了。这样,数组变量 args 包含了所有 arguments 对象包含的值。

 

使参数构建函数
   使用 arguments 对象能够简短我们编写的 Javascript 代码量。下面有个名为 makeFunc 的函数,它根据你提供的函数名称以及其他任意数目的参数,然后返回个匿名函数。此匿名函数被调用时,合并的原先被调用的参数,并交给指定的函数运行然后返 回其返回值。

function makeFunc() {
    var args = Array.prototype.slice.call(arguments);
    var func = args.shift();
    return function() {
      return func.apply(null,   args.concat(Array.prototype.slice.call(arguments)));};
}

    arguments 有一个不可枚举的属性callee(不能用for in读出,可用HasOwnProterty(name)来判断),arguments.callee为正被执行的 Function 对象。slice时己把当前函数指针copy了过去,所以args的第一个元素为函数类型

    makeFunc 的第一个参数指定需要调用的函数名称(是的,在这个简单的例子中没有错误检查),获取以后从 args 中删除。makeFunc 返回一个匿名函数,它使用函数对象的(Function Object)apply 方法调用指定的函数。

    apply 方法的第一个参数指定了作用域,基本上的作用域是被调用的函数。不过这样在这个例子中看起来会有点复杂,所以我们将其设定成 null ;其第二个参数是个数组,它指定了其调用函数的参数。makeFunc 转换其自身的 arguments 并连接匿名函数的 arguments,然后传递到被调用的函数。

   有种情况就是总是要有个输出的模板是相同的,为了节省每次是使用上面提到的 format 函数并指定重复的参数,我们可以使用 makeFunc 这个工具。它将返回一个匿名函数,并自动生成已经指定模板后的内容:

var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");
你可以像这样重复指定 majorTom 函数:

   majorTom("stepping through the door");
   majorTom("floating in a most peculiar way");
那么当每次调用 majorTom 函数时,它都会使用第一个指定的参数填写已经指定的模板。例如上述的代码返回:

"This is Major Tom to ground control. I'm stepping through the door."
"This is Major Tom to ground control. I'm floating in a most peculiar way."

 

自引用的函数
   您可能会认为这很酷,先别急着高兴,后面还有个更大的惊喜。它(arguments)还有个其他非常有用的属性:callee 。arguments.callee 包含了当前调用函数的被引用对象。那么我们如何使用这玩意做些的事情?arguments.callee 是个非常有用的调用自身的匿名函数。

   下面有个名为 repeat 的函数,它的参数需要个函数引用和两个数字。第一个数字表示运行的次数,而第二个函数定义运行的间隔时间(毫秒为单位)。下面是相关的代码:

function repeat(fn, times, delay) {
    return function() {
        if (times-- > 0) {
            fn.apply(null, arguments);
            var args = Array.prototype.slice.call(arguments);
            var self = arguments.callee;
            setTimeout(function(){self.apply(null,args)}, delay);
        }
   };
}


   repeat 函数使用 arguments.callee 获得当前引用,保存到 self 变量后,返回个匿名函数重新运行原本被调用的函数。最后使用 setTimeout 以及配合个匿名函数实现延迟执行。

   作为个简单的说明,比如会在通常的脚本中,编写下面的提供个字符串并弹出个警告框的简单函数:

function comms(s) {
    alert(s);
}
   好了,后来我改变了我的想法。我想编写个“特殊版本”的函数,它会重复三次运行每次间隔两秒。那么使用我的 repeat 函数,就可以像这样做到:

var somethingWrong = repeat(comms, 3, 2000);
somethingWrong("Can you hear me, major tom?");
结果就犹如预期的那样,弹出了三次警告框每次延时两秒。

最后,arguments 即便不会经常被用到,甚至显得有些诡异,但是它上述的那些惊艳的功能(不仅仅是这些!)值得你去了解它。

undefined ≠ null
null 是一个对象,undefined是一个属性、方法或变量。存在null是因为对象被定义。如果对象没有被定义,而测试它是否是null,但因为没有被定义,它无法测试到,而且会抛出错误。

if (myObject !== null && typeof(myObject) !== 'undefined') {
    //如果myObject是undefined,它不能测试是否为null,而且还会抛出错误
}
if (typeof(myObject) !== 'undefined' && myObject !== null) {
    //处理myObject的代码
}


本文转载自:http://www.oschina.net/question/54100_15938

上一篇: js中的Map
下一篇: Android启动流程
AntMoon
粉丝 0
博文 19
码字总数 4923
作品 0
津南
私信 提问
javafx 的 webview中js调用java重载方法

如题 javafx使用webview控件的时候 需要用js调用java代码 但是java代码中如果有重载方法 (方法名相同 方法参数不通 )就会被覆盖 无法全部调用 js参数是可变长度的 如何在javafx类中 得到完...

衷于栖
2015/01/18
1K
0
Js框架到底干了什么?

Js框架到底干了什么?本人感觉原生也能实现。曾经在一个项目中遇到一个需求---------参数决定grid的列类型。比如定义一个grid,有两列。第一列为文本对象,但是第二列为可变的。当显示每一行...

还是学习吧
2013/04/16
2.7K
16
vue和react的区别之我见

react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。 1.数据是不是可变的 react整体是函数式的思想,把组件...

凌霄光
2018/08/26
0
0
[译] JavaScript中的函数柯里化

原文 Currying in JS 函数柯里化 函数柯里化以Haskell Brooks Curry命名,柯里化是指将一个函数分解为一系列函数的过程,每个函数都只接收一个参数。(译注:这些函数不会立即求值,而是通过...

西麦
2018/12/19
0
0
关于javaScript的认识

NaN与Infinity和-Infinity不同的是,NaN不会与任何数值变量相等,可以用javaScript专门提供的isNaN()函数来判断某个变量是否为NaN。 Undefined类型的值只有undefined一个,该值用于表示某个变...

杨松坤
2012/05/09
223
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
4
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
7
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部