javascript 函数详解2 -- arguments

青旅半醒 2022-08-14 02:59 230阅读 0赞

[![f0735859-2425-4589-8578-239edff9c660.png][]][f0735859-2425-4589-8578-239edff9c660.png 1]

今天我们接着上篇文章来继续javascript函数这个主题。今天要讲的是函数对像中一个很重要的属性--arguments。

> 相关阅读：
> 
>  *  [javascript 函数详解1 -- 概述][javascript _1 --]  
>     
>  *  [javascript 函数详解2 -- arguments][javascript _2 -- arguments]  
>     
>  *  [Javascript 函数详解3 -- this对象 ][Javascript _3 -- this_]  
>     
>  *  [Javascript 函数详解4 -- 函数的其他属性 ][Javascript _4 -- _]  
>     
>  *  [Javascript 函数详解5 -- 函数对象的内部函数 ][Javascript _5 -- _]  
>

arguments对象参数数组引用

arguments是函数对象内部一个比较特殊的类数组对象，这个对象中包含了所属函数的参数列表，同时还包含一个指向函数原型对象的指针.

我们先来讨论下arguments中的参数数组，我们可以直接使用\[index\]的类似访问数组的方式来访问参数。要真正理解这特性，我们先要知道javascript的函数不关心你传递的参数，因为在调用函数的时候，在函数内部他接收的是一个参数数组，也就是说，理论上，我们可以在声明函数的时候可以不声明任何参数，但是在调用的时候却可以传递任意多的参数。

如下代码示例：

function sayHi(){
        var name = arguments[0]||"default name",
        greeting = arguments[1]||" how are you";
        console.log("Hello "+name+","+ greeting);
        }
        //不传参数调用
        sayHi();
        //传一个参数调用
        sayHi("John");
        //传两个参数调用
        sayHi("John","你好！");

执行结果：

[![dd19845f-4d98-4413-aeb0-3acd417f56fe.png][]][dd19845f-4d98-4413-aeb0-3acd417f56fe.png 1]

接下来我们在看另外一段代码，来探索arguments对象与参数列表的引用关系。

function dosum(op1,op2){
        arguments[1] = 20;
        console.log(arguments[0]+op2);
        }
        dosum(1,1);

我们先预测下执行结果，2还是21？

真正的执行结果如下：

[![ebd3e1ee-233f-468c-83bb-f821d3cb93c4.png][]][ebd3e1ee-233f-468c-83bb-f821d3cb93c4.png 1]

针对上面的执行结果我们可以抽象下argument与参数数组间的引用管理模型。

[![f0735859-2425-4589-8578-239edff9c660.png][]][f0735859-2425-4589-8578-239edff9c660.png 1]

arguments callee属性

arguments callee属性是一个指向函数对象的指针，灵活使用该属性可以大大降低代码与函数名的耦合度，同时可以使代码更加灵活。

降低耦合度一般在递归运算中体现比较明显。

如下代码：

function factorial(num){
        if(num<=1){
        return 1;
        } else{
        return num*factorial(num-1);
        }
        }

上面这段代码最大的缺点就是与函数名factorial的耦合，正如我们一开始讲的，函数名是一个指针，也就是一个变量，如果我们能保证该变量一直引用该函数对象，那么这段代码就一直能返回我们所期望的结果。一旦该变量指向了其他对象，上面的代码就会出错，这时候 arguments.callee就能够发挥作用了。修改如下：

function factorial(num){
        if(num <= 1){
        return 1;
        }else{
        return num * arguments.callee(num -1 );
        }
        }

这样，这个函数对象的计算结果就与函数名factorial没有关系了，就算之后做如下操作，我们依旧可以得到正确的结果。

var afunc = factorial;

factorial = null;

afunc(3); // 同样可以正确返回6

通过arguments.callee的另外一个比较灵活的应用如下：

var otherfunc = (function(){
        console.log("do something cool");
        return arguments.callee;
        })();

上面代码所做的操作时立即执行了一个函数，并返回该匿名函数的引用，赋值给otherfunc,这时我们就可以在其他地方继续调用这个函数。

这样的用法是我在项目中遇到的，页面初始化时要做一些操作，也就是页面加载完成后立即执行该函数，但是这个函数并不是一次性的，我们还需要在该页面的其他时候来调用这个函数，上面的代码，个人会比先声明一个函数，然后在页面加载完成后调用要优雅一些，见仁见智罢了。

原文来自：[javascript 函数详解2 -- arguments ][javascript _2 -- arguments]

[f0735859-2425-4589-8578-239edff9c660.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/f0735859-2425-4589-8578-239edff9c660.png
[f0735859-2425-4589-8578-239edff9c660.png 1]: http://www.gbtags.com/gb/networks/uploadimg/f0735859-2425-4589-8578-239edff9c660.png
[javascript _1 --]: http://www.gbtags.com/gb/share/4204.htm
[javascript _2 -- arguments]: http://www.gbtags.com/gb/share/4213.htm
[Javascript _3 -- this_]: http://www.gbtags.com/gb/share/4218.htm
[Javascript _4 -- _]: http://www.gbtags.com/gb/share/4222.htm
[Javascript _5 -- _]: http://www.gbtags.com/gb/share/4232.htm
[dd19845f-4d98-4413-aeb0-3acd417f56fe.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/dd19845f-4d98-4413-aeb0-3acd417f56fe.png
[dd19845f-4d98-4413-aeb0-3acd417f56fe.png 1]: http://www.gbtags.com/gb/networks/uploadimg/dd19845f-4d98-4413-aeb0-3acd417f56fe.png
[ebd3e1ee-233f-468c-83bb-f821d3cb93c4.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/ebd3e1ee-233f-468c-83bb-f821d3cb93c4.png
[ebd3e1ee-233f-468c-83bb-f821d3cb93c4.png 1]: http://www.gbtags.com/gb/networks/uploadimg/ebd3e1ee-233f-468c-83bb-f821d3cb93c4.png