详解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实现跳转菜单的具体方法
Jul 05 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
React事件处理的机制及原理
Dec 03 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
Nuxt.js实战和配置详解
Aug 05 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中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
python处理二进制数据的方法
2015/06/03 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python列表解析操作实例总结
2020/02/26 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
Java模拟试题
2014/11/10 面试题
远程研修随笔感言
2014/02/10 职场文书
生物学专业求职信
2014/07/23 职场文书
自我工作评价范文
2015/03/06 职场文书
行政处罚告知书
2015/07/01 职场文书
担保书怎么写 ?
2019/04/22 职场文书