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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
JS实现炫酷轮播图
Nov 15 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
CodeIgniter CLI模式简介
2014/06/17 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Python中强大的命令行库click入门教程
2016/12/26 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python List cmp()知识点总结
2019/02/18 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
银行贷款委托书范本
2014/10/11 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
python用字节处理文件实例讲解
2021/04/13 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技