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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
javascript元素动态创建实现方法
May 13 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
原生js实现弹窗消息动画
Nov 20 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分页显示制作详细讲解
2006/10/09 PHP
用PHP开发GUI
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
小学家长会邀请函
2014/01/23 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
交通志愿者活动总结
2014/06/27 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书