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 相关文章推荐
判断一个变量是数组Array类型的方法
Sep 16 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
js表达式与运算符简单操作示例
Feb 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
php压缩文件夹最新版
2018/07/18 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
2015年七一建党节活动总结
2015/03/20 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle