详解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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
vue v-on监听事件详解
May 17 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
JavaScript实现雪花飘落效果
Dec 27 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函数
2006/12/06 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php数组删除元素示例
2014/03/21 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python continue语句实例用法
2020/02/06 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
学校万圣节活动方案
2014/02/13 职场文书
2014年安全生产责任书
2014/07/22 职场文书
销售目标责任书
2014/07/23 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
青岛海底世界导游词
2015/02/11 职场文书
新生开学寄语大全
2015/05/28 职场文书
《观潮》教学反思
2016/02/17 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL