详解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 json2 使用方法
Mar 16 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
如何让你的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
很好用的PHP数据库类
2009/05/27 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
基于php 随机数的深入理解
2013/06/05 PHP
PHP中的Memcache详解
2014/04/05 PHP
php实现微信发红包
2015/12/05 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python安装requests库的实例代码
2019/06/25 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
财务负责人任命书
2014/06/06 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
工作检讨书500字
2014/10/19 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
MySQL添加索引特点及优化问题
2022/07/23 MySQL