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不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
node.js中的require使用详解
Dec 15 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
了解JavaScript中let语句
May 30 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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代码书写习惯优化小结
2013/06/20 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
tensorflow 实现数据类型转换
2020/02/17 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
高考自主招生自荐信
2013/10/20 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
会计毕业生自荐书
2014/06/12 职场文书
银行授权委托书范本
2014/10/04 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python