详解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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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实现图片简单上传
2006/10/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Numpy中的mask的使用
2018/07/21 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python生成器用法实例详解
2019/11/22 Python
python数据爬下来保存的位置
2020/02/17 Python
python3代码中实现加法重载的实例
2020/12/03 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫