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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
原生JS进行前后端同构
Apr 22 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 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 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python封装对象实现时间效果
2020/04/23 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python解析多帧dicom数据详解
2020/01/13 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
单位办理社保介绍信
2014/01/10 职场文书
师范生自荐信模板
2014/05/28 职场文书
文明礼仪标语
2014/06/13 职场文书
企业党员个人自我评价
2014/09/20 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2016年母亲节广告语
2016/01/28 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL
TypeScript 内置高级类型编程示例
2022/09/23 Javascript