详解JS函数重载


Posted in Javascript onDecember 04, 2014

JS的函数定义可以指定形式参数名称,多多少少我们会以为js至少可以支持参数个数不同的方法重载,然而遗憾的是这仅仅是一个假象,js所有的参数都是以arguments传递过去的,这个参数类似于数组,在函数调用的时候,所有的实参都是保存在了这个数据结构里面,我们定义函数的时候所指定的形式参数其实是为这个数据结构里面的数据定义一个快捷的访问方式。也就是说js所有的函数都是支持无限个参数的,加上数据类型是弱类型,那么JS的函数除了名称就真的没有方法区别了?

办法总是有的,我们可以利用JavaScript中的特殊对象arguments来模拟函数重载。用它来判断传入参数的个数或类型以区分重载。

1.根据参数个数重载

js判断传入参数数量可以用arguments.length这个属性来判断;

<script type="text/javascript">

function add() {

    if (arguments.length == 1) {

        alert(arguments[0] + 10);

    }

    else if (arguments.length == 2) {

        alert(arguments[0] + arguments[1]);

    }

}

//函数调用

add(10);

add(10, 20);

</script>

2.根据参数类型重载

判断变量类型的3种方法:
1.用 typeof 语句判断变量类型,typeof语句返回类型对应的字符串。
2.用 instanceof 语句判断变量类型,instanceof语句返回true/false。
3.用 constructor 属性判断变量类型,这个属性返回用来构造该变量的构造函数引用。
对照表:可以看出用 typeof 不能准确的判断出具体的类型,所以我们用 constructor 来进行判断。

typeof string number object function boolean object object
constructor String Number Object Function Boolean Array User Define

<script type="text/javascript">

function add() 

{

    if (arguments.length == 0) return 0;

    var sum=0;

    for(var i=0; i<arguments.length; i++){

        if(arguments[i].constructor == Number){

        //或者改为:if(arguments[i] instanceof Number)

        //或者改为:if(typeof(arguments[i])=="number")

        sum += arguments[i];

      }

    }

    return sum;

}

//函数调用

alert(add(10));

alert(add(10,20));

</script>

小伙伴们是否理解了javascript函数重载的方法了呢,有疑问就留言吧

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
js实现常见的工具条效果
Mar 02 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 #Javascript
javascript常用代码段搜集
Dec 04 #Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
You might like
PHP中的正规表达式(二)
2006/10/09 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
对联广告js flash激活
2006/10/19 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python 实现自动导入缺失的库
2019/10/29 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Django如何批量创建Model
2020/09/01 Python
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
小学生家长评语大全
2014/02/10 职场文书
任命书模板
2014/06/04 职场文书
客房领班岗位职责
2015/02/11 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
人民币使用说明书
2019/04/17 职场文书