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 弹出层实现代码
Oct 30 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
一个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写MySQL数据 实现代码
2009/06/15 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python实现EM算法实例代码
2020/10/04 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
车辆工程专业求职信
2014/06/14 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
患者身份识别制度
2015/08/06 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python