详解Javascript中arguments对象的的意义与用法

根据W3C手册中的解释:在函数代码中,使用特殊对象arguments,开发者无需明确指出参数名,就能访问它们。乍一看,这句话到底什么意思?还真是不明白,我们用下面这段代码来详细介绍arguments对象。

定义函数的时候有“形参”,执行函数的时候有实参,比如下面的代码:

function fn( a ){
var b = a+1;
alert( b ); //2
}
fn( 1 );
这里的实参只有一个,那么如果我们定义了一个函数,但是这个函数要在不同的地方被执行,每次执行的时候都要传入不同的参数,而且参数的个数不确定,这怎么办呢?

接下来我们说的arguments对象就可以完美的解决这个问题。比如下面的代码:

function fn(){
console.log( arguments.length );
}
fn( “a”,”b”,”c”,”d” );//4
fn( 1,2,”你好” ); //3
从上面的代码中可以看到,fn被调用了2次,每次调用时传入的参数都不一样,这里的参数叫做“不定参”,用arguments来表示。

我们做一个实际的案例来实现数组的push方法。

Array.prototype.push = function(){
for( var i=0; i<arguments.length; i++ ){
this[this.length] = arguments[i];
}
}
var arry = [1,2,3];
console.log( arry ); //1,2,3
arry.push( 4,5,6 );
console.log( arry ); //1,2,3,4,5,6
上面的代码就是数组push方法实现的原理,用这个方法可以帮助我们更好的理解arguments的用法!

注意:arguments对象和Function是分不开的。因为arguments这个对象不能显式创建,arguments对象只有函数开始时才可用。

下面来看argumens的一个callee属性,首先我们执行一个函数,传参时候,打印一下这个arguments:

function fn(a,b,c,d,e){
console.log(arguments);
}
fn(1,2,3,4,5);
打印结果如下:

arguments打印结果

看到这个callee属性也是一个对象,其中name值就是这个函数的函数名。

通俗一点就是,arguments此对象大多用来针对同个方法多处调用并且传递参数个数不一样时进行使用,相当于给每个执行对象添加了一个状态值,这样方便记录,下次使用。根据arguments的索引来判断执行的方法。

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
<a href=”javascript:;” onclick=”fn(this.innerHTML)”>第一个</a>
<a href=”javascript:;” onclick=”fn(this.innerHTML)”>第二个</a>
</body>
</html>
<script type=”text/javascript”>
function fn(field){
if(arguments.callee.mark==’undefined’){
arguments.callee.mark = false;
}
arguments.callee.mark = !arguments.callee.mark;
console.log(htmls+arguments.callee.mark);
}
</script>
参考arguments.callee的实际用法:《AngularJs中的过滤器使用方法总结》。