首页 > 代码库 > 函数内部的两个特殊的对象：arguments和this

函数内部的两个特殊的对象：arguments和this

2024-09-16 06:58:28   217人阅读

arguments是一个类数组对象，包含着传入函数中的所有参数

在arguments中还存在着一个callee属性，该属性是一个指针，指向拥有这个arguments对象的函数。

下面是一个阶乘函数

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

但是这个函数的执行与函数名紧紧耦合在一起

<!DOCTYPE html>
<html>
<head>
    <title>Add Example 1</title>
</head>
<body>
    <script type="text/javascript">
        function factorial(num){
            if(num<=1){
                return 1;
            }else{
                return num*factorial(num-1);
            }
        }

        var trueFactorial=factorial;
        factorial=function(){return 0};
        alert(trueFactorial(5)); //0
       
    </script>
</body>
</html>

使用arguments.callee可以消除这个麻烦

<!DOCTYPE html>
<html>
<head>
    <title>Add Example 1</title>
</head>
<body>
    <script type="text/javascript">
        function factorial(num){
            if(num<=1){
                return 1;
            }else{
                return num*arguments.callee(num-1);
            }
        }

        var trueFactorial=factorial;
        factorial=function(){return 0};
        alert(trueFactorial(5)); //120
       
    </script>
</body>
</html>

函数内部的另一个特殊的对象是this,其行为与Java和C#中的this大致类似

换句话说：this引用的是函数据以执行的环境对象——或者也可以说是this值（当在网页的全局作用域中调用函数时,this对象引用的就是window）。

看下面的例子

<!DOCTYPE html>
<html>
<head>
    <title>Add Example 1</title>
</head>
<body>
    <script type="text/javascript">
       window.color="red";
       var o={color:"blue"};
       function sayColor(){
           alert(this.color);
       }
       sayColor();  //"red"
       o.sayColor=sayColor;
       o.sayColor(); //"blue"  
    </script>
</body>
</html>

 

caller属性中保存着调用当前函数的函数的引用

如果是全局作用域中调用当前函数，它的值为null;

<!DOCTYPE html>
<html>
<head>
    <title>Add Example 1</title>
</head>
<body>
    <script type="text/javascript">
       function outer(){
           alert(outer.caller);     //null
           inner();
       }
       function inner(){
           alert(inner.caller);      
       }
       outer();
    </script>
</body>
</html>

第一个警告框中显示null，因为outer方法是在全局作用域调用的

第二个警告框中显示outer()函数的源代码。因为outer()调用了inner()，所以inner.caller就指向outer()。为了实现更加宽松的耦合，也可以通过arguments.callee.caller来访问相同的信息。

<!DOCTYPE html>
<html>
<head>
    <title>Add Example 1</title>
</head>
<body>
    <script type="text/javascript">
       function outer(){
           alert(arguments.callee);      //outer的源代码
           alert(arguments.callee.caller);    //null
           inner();
       }
       function inner(){
            alert(arguments.callee);     //inner的源代码
           alert(arguments.callee.caller);    //outer的源代码
       }
       outer();
    </script>
</body>
</html>

函数内部的两个特殊的对象：arguments和this


联系
我们