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 通用javascript函数库整理
Aug 14 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP可变函数的使用详解
2013/06/14 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
angular 服务随记小结
2019/05/06 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
python求素数示例分享
2014/02/16 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
物业管理计划书
2014/01/10 职场文书
幼儿园老师寄语
2014/04/03 职场文书
10的分与合教学反思
2014/04/30 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书