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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
vue插件实现v-model功能
Sep 10 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
js实现简单的秒表
Jan 16 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python调用java的jar包方法
2018/12/15 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python文件路径名的操作方法
2019/10/30 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
HTTP状态码详解
2021/03/18 杂记
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
大专生简历的自我评价
2013/11/26 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript