详解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 相关文章推荐
JS跨域代码片段
Aug 30 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
Javascript之String对象详解
Jun 08 Javascript
js运动事件函数详解
Oct 21 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
js实现网页版贪吃蛇游戏
Feb 22 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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中str_replace函数使用小结
2008/10/11 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
javascript this详细介绍
2016/09/19 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Java分治归并排序算法实例详解
2017/12/12 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
pycharm快捷键汇总
2020/02/14 Python
python设置环境变量的作用整理
2020/02/17 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
使用python实现飞机大战游戏
2020/03/23 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
解决方案设计综合面试题
2015/08/31 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python