zoukankan      html  css  js  c++  java
  • Javascript 中的 Function对象

    在 js 中 函数 Function(大写) 就是一个对象。在 javascript 中没有函数 reload (重载)的概念。

    我们看下面这个,结果应该是什么呢?

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

    结果是 40. 也就是第二个 add()方法的结果。我们再改成

    <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.虽然第二个 add()中有2个参数。

    我们把两个 add()方法调换位置。

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

    结果变成了 30。

    难道 js 是查看哪个方法在后面么?不是。

    其实对于第一个 add(number){alert(number+20;} 方法,它等于

    var add = function (number) //f 是小写
    {
    alert(number + 20);
    }

    也就是说 function (number){alert(number+20);} 是一个对象。而 add 是指向 function 对象的引用。

    所以第二个变成了

    var add = function (number, number1)
    {
    alert(number + 30);
    }

    这时候 add 已经指向了这个 function 对象,而不再指向原来的 (number+20)对象。又由于 js 中可以定义2个参数却仅仅传递1个参数,所以 add指向的新的 function对象仍然可以继续执行。

    我们再看下面这个。结果是什么呢?

    <html>
      <head>
        <script type="text/javascript">
            function add(number)
            {
            alert(number+20);
            }
            function add(number, number1)
            {
            alert(number1);
            }
            add(10);//注意:这里只传递了 number 没有传递 number1
        </script>
      </head>
      <body>
      </body>
    </html>

    结果是: undefined

    javascript 中有一种数据类型叫 Undefined。它只有一个值 undefined.

    就像java中有数据类型 boolean,它有两个值 true或者 false一样。

    在 javascript 中有个 Function(大写)  对象,所有自定义的函数都是 Function (大写)对象类型的。

    既然如此,我们也可以用 Function 对象来直接定义函数:

    <!DOCTYPE html>
    <html>
      <head>
          <script type="text/javascript">
          var add = new Function("number", "alert(number+20)");
          add(10);
          </script>
      </head>
      
      <body>
    
      </body>
    </html>

    注意, Function 这个对象中所有的参数都是字符串的形式的(即使我们用 add(10)传进来一个数字),而且他的最后一个参数(这里指 "alert(number+20)")是要执行的函数体。

    再看一个实例

    <html>
      <head>
          <script type="text/javascript">
          
          var add2 = new Function("number", "number1", "alert(number+number1);");
    
          add2(10,20);
          </script>
      </head>
      <body>
      </body>
    </html>

    结果:30

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

    我们看这个

    <html>
      <head>
          <script type="text/javascript">
            function add(num1, num2)
            {
                alert(arguments[0]);
                alert(arguments[1]);
            }
            add(2,3);
          </script>
      </head>
      <body>
      </body>
    </html>

    结果会依次打印出 2 , 3

    我们再看一个

    <html>
      <head>
          <script type="text/javascript">
            function add(num1, num2)
            {
                alert(arguments[0]);
                alert(arguments[1]);
                alert(arguments[2]);
            }
            add(2,3,4);
          </script>
      </head>
      <body>
      </body>
    </html>

    上面的例子add只定义了两个参数,但是调用的时候传进来3个参数,可以么?结果如何?

    可以的。结果是一次打印出 2, 3, 4。

    这就是说 arguments 这个固有对象是不受自定义方法的影响的。

    arguments 还有一个属性 length,表示有几个参数,比如:

    <html>
      <head>
          <script type="text/javascript">
            function add(num1, num2)
            {
                alert(arguments.length);
            }
            add(2,3,4);
          </script>
      </head>
      <body>
      </body>
    </html>

    结果是: 3

    表示3 个参数。

    js 是不支持方法重载的,但是我们可以使用 arguments模拟出来方法的重载的。

    <html>
      <head>
          <script type="text/javascript">
            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(1);
            add2(1,1);
            add2(1,1,1);
          </script>
      </head>
      <body>
      </body>
    </html>

    结果,分别打印出 1, 2, 3

    其实,由于 javascript 中对传入参数数量没有严格限定, 在很多框架中都应用了 arguments来限定用户输入的参数个数。

  • 相关阅读:
    重载运算与类型转换——函数调用运算符,重载、类型转换与运算符
    重载运算与类型转换——基本概念,输入和输出运算符,算术和关系运算符,赋值运算符,下标运算符,递增和递减运算符,成员访问运算符
    拷贝控制——拷贝控制和资源管理,交换操作,对象移动
    拷贝控制——拷贝、赋值与销毁
    动态内存——动态数组
    middlegenide&nbsp;&nbsp;eclipse&nbsp;的插件
    jquery
    avg
    dom4j
    dom4j&nbsp;&nbsp;简单使用
  • 原文地址:https://www.cnblogs.com/backpacker/p/2617642.html
Copyright © 2011-2022 走看看