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 表单验证方法(实用)
Apr 28 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
理解AngularJs指令
Dec 10 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 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
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
vue-axios使用详解
2017/05/10 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
开始着手第一个Django项目
2015/07/15 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python从入门到精通(DAY 2)
2015/12/20 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
如何通过python计算圆周率PI
2020/11/11 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
领导失职检讨书
2014/02/24 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
500字作文之周记
2019/12/13 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python