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的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
React-Native之定时器Timer的实现代码
Oct 04 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
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Python的print用法示例
2014/02/11 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python中turtle作图示例
2017/11/15 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python标准库os库的函数介绍
2020/02/12 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
河童之夏观后感
2015/06/11 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
Python办公自动化PPT批量转换操作
2021/09/15 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫