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脚本
Dec 03 Javascript
JavaScript 指导方针
Apr 05 Javascript
$.ajax json数据传递方法
Nov 19 Javascript
jQuery 浮动广告实现代码
Dec 25 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Python 自动补全(vim)
2014/11/30 Python
python通过socket查询whois的方法
2015/07/18 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python使用mysql的两种使用方式
2018/03/07 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python爬取成语接龙类网站
2018/10/19 Python
python全栈知识点总结
2019/07/01 Python
python返回数组的索引实例
2019/11/28 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
静心口服夜广告词
2014/03/20 职场文书
闭幕式主持词
2014/04/02 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
车间安全生产管理制度
2015/08/06 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Python中常见的导入方式总结
2021/05/06 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
react 路由Link配置详解
2021/11/11 Javascript