详解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 变量基础知识
Nov 07 Javascript
javascript 快速排序函数代码
May 30 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 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&amp;java(一)
2006/10/09 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php数组分页实现方法
2016/04/30 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
JS中的作用域链
2017/03/01 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Sanic框架应用部署方法详解
2018/07/18 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
测量实习生自我鉴定
2013/09/19 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
管理提升方案
2014/06/04 职场文书
学习心理学的体会
2014/11/07 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书