详解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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
js轮播图之旋转木马效果
Oct 13 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
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
jQuery实现评论模块
2020/08/19 jQuery
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
党校培训思想汇报
2013/12/30 职场文书
图书室管理制度
2014/01/19 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
留学生求职信
2014/06/03 职场文书
公证委托书格式
2014/09/13 职场文书
廉政承诺书
2015/01/19 职场文书
学雷锋感言
2015/08/03 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS