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来限定用户输入的参数个数。

原文地址:https://www.cnblogs.com/backpacker/p/2617642.html