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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
一个基于react的图片裁剪组件示例
Apr 18 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
如何给phpadmin一个保护
2006/10/09 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php 面向对象的一个例子
2011/04/12 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
js计时事件实现圆形时钟
2020/03/25 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
django 环境变量配置过程详解
2019/08/06 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
机电专业毕业生推荐信
2013/11/10 职场文书
大学生表扬信范文
2014/01/09 职场文书
物业经理自我鉴定
2014/03/03 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
师范生见习自我总结
2015/06/23 职场文书
初中同学会致辞
2015/08/01 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
python3.9之你应该知道的新特性详解
2021/04/29 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
java开发双人五子棋游戏
2022/05/06 Java/Android
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS