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 获得绝对,相对位置的坐标方法
Feb 09 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
期末总结的个人自我评价
2013/11/02 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
平安工地建设方案
2014/05/06 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书