JavaScript学习笔记之Function对象

 更新时间:2015年01月22日 11:46:11   投稿:hebedich  
这篇文章主要介绍了JavaScript学习笔记之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>

相关文章

  • 深入理解javascript中的this

    深入理解javascript中的this

    这篇文章主要介绍了深入理解Js中的this,有队这方面感兴趣的同学可以阅读学习下
    2021-02-02
  • javascript中的location用法简单介绍

    javascript中的location用法简单介绍

    javascript中的location用法简单介绍...
    2007-03-03
  • 对JavaScript客户端应用编程的一些建议

    对JavaScript客户端应用编程的一些建议

    这篇文章主要介绍了对JavaScript客户端应用编程的一些建议,主要针对MVC框架框架的一些相关使用问题,需要的朋友可以参考下
    2015-06-06
  • JavaScript中判断对象类型的几种方法总结

    JavaScript中判断对象类型的几种方法总结

    本篇文章是对JavaScript中判断对象类型的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • javascript设计模式之工厂模式

    javascript设计模式之工厂模式

    这篇文章主要为大家介绍了javascript工厂模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • js单例模式详解实例

    js单例模式详解实例

    这篇文章主要介绍了什么是单例单例模式、使用场景,提供了3个示例给大家参考
    2013-11-11
  • ES6学习总结之Set和Map的使用

    ES6学习总结之Set和Map的使用

    这篇博客介绍了 ES6 中的 Set 和 Map 数据结构,Set 是一个存储唯一值的集合,支持添加、删除、检查元素的方法,Map 则是用于存储键值对的集合,键和值都可以是任何类型,文章详细讲解了两者的主要方法和用法,并与传统的数组和对象进行了对比,突出 Set 和 Map 的独特优势
    2024-08-08
  • JS中的this变量的使用介绍

    JS中的this变量的使用介绍

    在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,在本文将为大家详细介绍下JavaScript中this的使用,感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript中各数制转换全面总结

    JavaScript中各数制转换全面总结

    这篇文章主要介绍了JavaScript中各数制转换,利用toString的基模式来进行转换,对数字调用 toString(10) 与调用 toString() 它们返回的区别和相同之处等等都在本文中提及,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 关于reduce的介绍及用法说明

    关于reduce的介绍及用法说明

    这篇文章主要介绍了关于reduce的用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论