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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
聊聊Vue中provide/inject的应用详解
Nov 10 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+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
微信小程序 setData的使用方法详解
2017/04/20 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
介绍Python中的__future__模块
2015/04/27 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python实现推箱子游戏
2020/03/25 Python
Python发展简史 Python来历
2019/05/14 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python变量命名的7条建议
2019/07/04 Python
详解python解压压缩包的五种方法
2019/07/05 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
学生打架检讨书1000字
2014/01/16 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
德能勤绩工作总结
2015/08/11 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
MySQL 全文索引使用指南
2021/05/25 MySQL
JavaCV实现照片马赛克效果
2022/01/22 Java/Android