javascript函数重载解决方案分享


Posted in Javascript onFebruary 19, 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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 #Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 #Javascript
jQuery拖拽div实现思路
Feb 19 #Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 #Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
javascript动态向网页中添加表格实现代码
Feb 19 #Javascript
You might like
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
对python调用RPC接口的实例详解
2019/01/03 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
大学生村官演讲稿
2014/04/25 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
大学入学感言
2015/08/01 职场文书