JavaScript学习09 函数本质及Function对象深入探索

 

JavaScript学习09 函数本质及Function对象深入探索

 

　　在JavaScript中，函数function就是对象。

 

JS中没有方法重载

　　在JavaScript中，没有方法(函数)重载的概念。

　　例子：

<html>
       <head>
              <script type="text/javascript"> 
                
              function add(number)
              {
                    alert(number + 20);   
              }
           
              function add(number, number1)
              {
                     alert(number + 30);   
              }           

              add(10);
              </script>
       </head>

       <body>

       </body>

</html>

 

　　网页中弹框显示的是40。

　　说明虽然第二个方法是两个参数，但是仍然调用了它。

　　交换两个方法的顺序之后，弹框显示30，可以看出不管参数个数如何，是调用同名的后面的方法。

 

　　怎么解释这个现象？

　　这是因为函数声明实际上是建立了一个对象：

<html>
    <head>
        <script type="text/javascript">
            
        function add(number)
        {
             alert(number + 20);    
        }
        /*
        上面的函数等价于：
        var add = function(number)
        {
            alert(number + 20);
        }
        */        
        function add(number, number1)
        {
            alert(number + 30);    
        }
        /*
        上面的函数等价于：
        var add = function(number, number1)
        {
            alert(number + 30);
        }    
        */
        add(10);

        </script>
    </head>
    <body>    
    </body>
</html>

　　这样add实际指向的是后面的对象，而方法调用的时候赋予的参数将会按顺序赋给方法形式参数，后面没有被赋值的参数就是undefined。

 

　　JavaScript的函数调用的时候没有严格的参数个数检查，实参个数小于形参个数是可以的，没有被赋值的形参就是未定义值undefined。

　　实参个数大于形参个数也是可以的，这样只有前面的实参会被使用，多出来的实参不会被使用。

 

Function对象

　　在JavaScript中有一个Function对象，所有自定义的函数都是Function对象类型的。

　　Function对象接收的所有参数都是字符串类型的，其中最后一个参数就是要执行的函数体，而前面的参数则是函数真正需要接收的参数。

　　例子：

<html>
    <head>
        <script type="text/javascript">

        var add = new Function("number", "number1", "alert(number + number1);");

        var add = new Function("number", "alert(number + 20);");

        add(10, 30);

        </script>
    </head>
    <body>    
    </body>
</html>

　　

 

隐含对象arguments

　　在JavaScript中，每个函数都有一个隐含的对象arguments，表示给函数实际传递的参数。

　　arguments和函数的形式参数及其个数无关。

 

　　arguments有个有用的属性length，表示实参的长度。可以借助这个来模拟出函数的重载：

　　练习例子：

<html>
    <head>
        <script type="text/javascript">
            
        function add(number1, number2)
        {
            alert(arguments.length);            
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
        }    
        //add(2, 3, 4);
        
        function add2()
        {
            if(1 == arguments.length)
            {
                alert(arguments[0]);
            }
            else if(2 == arguments.length)
            {
                alert(arguments[0] + arguments[1]);
            }
            else if(3 == arguments.length)
            {
                alert(arguments[0] + arguments[1] + arguments[2]);
            }
        }
        
        add2(3);
        add2(3, 4);
        add2(3, 4, 5);

        </script>
    </head>

    <body>    
    </body>
</html>

 

　　每一个函数对象都有一个length属性，表示该函数期望接收的参数格式。

　　它与函数的arguments不同，arguments.length表示函数实际接收的参数个数。

　　例子:

 

<html>

    <head>
        <script type="text/javascript">
        
        var add = function(num, num2, num3)
        {
            alert(num + num2 + num3);
        }    
        
        alert(add.length); //输出3
        add(1, 2, 3);

        var add2 = function()
        {
            
        }

        alert(add2.length); //输出0
        
        </script>


    </head>

    <body>
    

    </body>
</html>

 

 

 

参考资料

　　圣思园张龙老师Java Web视频教程。

　　W3School JavaScript教程：http://www.w3school.com.cn/js/index.asp

　　英文版：http://www.w3schools.com/js/default.asp

 

posted @ 2014-04-24 19:51  圣骑士wind  阅读(905)  评论(0)  编辑  收藏  举报