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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
JavaScript实现商品评价五星好评
Nov 30 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中GET变量的使用
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
JsonProperty 的使用方法详解
2019/10/11 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
有趣的python小程序分享
2017/12/05 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
同学聚会通知短信
2015/04/20 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server