JavaScript学习笔记之Function对象


Posted in Javascript onJanuary 22, 2015

 在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 相关文章推荐
js中return false(阻止)的用法
Aug 14 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
require.js的用法详解
Oct 20 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 #Javascript
javascript二维数组转置实例
Jan 22 #Javascript
JavaScript学习笔记之内置对象
Jan 22 #Javascript
JavaScript学习笔记之JS事件对象
Jan 22 #Javascript
jquery实现搜索框常见效果的方法
Jan 22 #Javascript
JavaScript学习笔记之定时器
Jan 22 #Javascript
JavaScript学习笔记之JS对象
Jan 22 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python中str.join()简单用法示例
2018/03/20 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python实现三维拟合的方法
2018/12/29 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
如何使用python写截屏小工具
2020/09/29 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
师范生个人推荐信
2013/11/29 职场文书
2014年信用社工作总结
2014/11/25 职场文书
美容院员工规章制度
2015/08/05 职场文书
月考总结与反思
2015/10/22 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL