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 相关文章推荐
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 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
php header示例代码(推荐)
2010/09/08 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Pycharm中如何关掉python console
2020/10/27 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
python如何修改文件时间属性
2021/02/05 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
大学生个人先进事迹材料范文
2014/05/03 职场文书
目标责任书格式
2014/07/28 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL