zoukankan      html  css  js  c++  java
  • 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

     

  • 相关阅读:
    November 07th, 2017 Week 45th Tuesday
    November 06th, 2017 Week 45th Monday
    November 05th, 2017 Week 45th Sunday
    November 04th, 2017 Week 44th Saturday
    November 03rd, 2017 Week 44th Friday
    Asp.net core 学习笔记 ( Area and Feature folder structure 文件结构 )
    图片方向 image orientation Exif
    Asp.net core 学习笔记 ( Router 路由 )
    Asp.net core 学习笔记 ( Configuration 配置 )
    qrcode render 二维码扫描读取
  • 原文地址:https://www.cnblogs.com/mengdd/p/3687244.html
Copyright © 2011-2022 走看看