详解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 相关文章推荐
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
node.js实现爬虫教程
Aug 25 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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/12/13 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python数据爬下来保存的位置
2020/02/17 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
优秀演讲稿范文
2013/12/29 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年财政局工作总结
2014/12/09 职场文书
大学生入党自荐书
2015/03/05 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
银行催款通知书
2015/04/17 职场文书
运动会宣传语
2015/07/13 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
24年收藏2000多部退役军用电台
2022/02/18 无线电
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Python编写冷笑话生成器
2022/04/20 Python