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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
JS中Location使用详解
May 12 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
简单实现jquery焦点图
Dec 12 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
JavaScript实现电灯开关小案例
Mar 30 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
javascript 小型动画组件与实现代码
2010/06/02 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Etam德国:内衣精品店
2019/08/25 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
Java基础面试题
2014/07/19 面试题
银行职业规划书范文
2013/12/28 职场文书
顶撞领导检讨书
2014/01/29 职场文书
绿色出行口号
2014/06/18 职场文书
建筑学专业自荐书
2014/07/09 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
课内比教学心得体会
2014/09/09 职场文书
保研导师推荐信
2015/03/25 职场文书
高中地理教学反思
2016/02/19 职场文书
六年级情感作文之500字
2019/10/23 职场文书
python程序的组织结构详解
2021/12/06 Python