javascript函数重载解决方案分享


Posted in Javascript onFebruary 19, 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学习笔记(一) 编写高质量代码
Aug 09 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
js实现3d悬浮效果
Feb 16 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 #Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 #Javascript
jQuery拖拽div实现思路
Feb 19 #Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 #Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 #Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 #Javascript
javascript动态向网页中添加表格实现代码
Feb 19 #Javascript
You might like
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
JS中Map和ForEach的区别
2018/02/05 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
vue实现购物车案例
2020/05/30 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
浅析使用Python操作文件
2017/07/31 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
单位消防安全制度
2014/01/12 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
群众路线调研报告范文
2014/11/03 职场文书
小学教师党员承诺书
2015/04/27 职场文书
困难补助申请报告
2015/05/19 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
详解Python requests模块
2021/06/21 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js