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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数内部的两个特殊的对象:arguments和this相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

函数内部属性之arguments和this

函数里的两个特殊对象

函数内部属性:arguments和 this

arguments.callee

js- this

JavaScript函数内部属性和函数方法