详解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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
深入浅析react native es6语法
Dec 09 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 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数组总结篇(一)
2008/09/30 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
js微信分享实现代码
2020/10/11 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
Python入门篇之对象类型
2014/10/17 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
深入理解Python中的super()方法
2017/11/20 Python
替换python字典中的key值方法
2018/07/06 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
中国电视购物:快乐购
2017/02/04 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
计算机系毕业生推荐信
2013/11/06 职场文书
40岁生日感言
2014/02/15 职场文书
简易版租房协议书范本
2014/10/13 职场文书
工资证明范本
2015/06/12 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS