详解JS函数重载


Posted in Javascript onDecember 04, 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函数重载的方法了呢,有疑问就留言吧

Javascript 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
iScroll.js 使用方法参考
May 16 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 #Javascript
javascript常用代码段搜集
Dec 04 #Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
You might like
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
jQuery入门知识简介
2010/03/04 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
高一数学教学反思
2014/02/07 职场文书
单位绩效考核方案
2014/05/11 职场文书
营销团队口号
2014/06/06 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Python实现信息管理系统
2022/06/05 Python