详解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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
javascript实现Table排序的方法
May 15 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
常用的javascript设计模式
Jan 11 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
如何让你的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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php简单截取字符串代码示例
2016/10/19 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
浅谈Python处理PDF的方法
2017/11/10 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python 元组操作总结
2019/09/18 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
环保建议书400字
2014/05/14 职场文书
企业文化标语大全
2014/06/10 职场文书
班级活动总结格式
2014/08/30 职场文书
管理失职检讨书
2015/05/05 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB