JS重载实现方法分析


Posted in Javascript onDecember 16, 2016

本文实例分析了JS重载实现方法。分享给大家供大家参考,具体如下:

重载是面向对象语言里很重要的一个特性,JS中没有真正的重载,是模拟出来的(因为js是基于对象的编程语言,不是纯面向对象的,它没有真正的多态:如继承、重载、重写)

一、什么时候用重载?

举例:

function getDataTop10(){
  alert("返回前10条数据");
}

后来需求改了,需要获得20条数据,而getDataTop10又被很多函数调用了,整体替换可以但麻烦,这时可以用重载

进而引出什么是重载:函数名相同,但是可以区分出来,想用哪个就用哪个,而不是后面的同名函数覆盖前面的

二、怎么用?

arguments:Js里的一个内置对象,包含了调用者传递的实际参数(函数声明时定义的参数个数不影响)

function getData(){
  alert("返回所有数据");
}
function getDataTop(num){
  alert("返回前"+num+"数据");
}
function getDataLimit(num1,num2){
  alert("返回前"+num1+"-"+num2+"数据");
}
function getDste(){
  var num=arguments.length;
  if(!num){
  getData();
  }
  else if(num==1){
  getDataTop(arguments[0]);
  }
  else if(num==2){
  getDataLimit(arguments[0],arguments[1]);
  }
}
getDste(5)

当参数很多时要写一大串,遂可以改进

function getData(){
  alert("返回所有数据");
}
function getDataTop(num){
  alert("返回前"+num+"数据");
}
function getDataLimit(num1,num2){
  alert("返回前"+num1+"-"+num2+"数据");
}
function getDste(){
  var num=arguments.length;
  if(!num){
    getData();
  }
  else if(num==1){
    getDataTop.apply(this,arguments);
  }
  else if(num==2){
    getDataLimit.apply(this,arguments);
  }
}
getDste(5)

如果参数个数相同,类型不同,又该如何

function getData(){
  alert("返回所有数据");
}
function getDataTop(num){
  alert("返回前"+num+"数据");
}
function getDataLimit(num1,num2){
  alert("返回前"+num1+"-"+num2+"数据");
}
function getDataByType(type){
  alert("将返回"+type+"类型的数据");
}
function getDste(){
  var num=arguments.length;
  if(!num){
  getData();
  }
  else if(num==1){
  if(typeof arguments[0]=="number"){
      getDataTop.apply(this,arguments);
  }
  else{
    getDataByType.apply(this,arguments);
  }
  }
  else if(num==2){
  getDataLimit.apply(this,arguments);
  }
}
getDste("array")

三、好处

有利于合作开发

四、坏处

“实现”太勉强,如果参数过多,就要很多if语句,显得代码很乱

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
javascript去除空格方法小结
May 21 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
实例讲解vue源码架构
Jan 24 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 #Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 #Javascript
js继承实现方法详解
Dec 16 #Javascript
详解jQuery简单的表格应用
Dec 16 #Javascript
JS中parseInt()和map()用法分析
Dec 16 #Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 #Javascript
JS数字千分位格式化实现方法总结
Dec 16 #Javascript
You might like
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
php多文件上传实现代码
2014/02/20 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
ES7之Async/await的使用详解
2019/03/28 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
几道PHP面试题
2013/04/14 面试题
营业员演讲稿
2013/12/30 职场文书
节约电力资源的建议书
2014/03/12 职场文书
运动员口号
2014/06/09 职场文书
员工教育培训协议书
2014/09/27 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
小学生教师节广播稿
2015/08/19 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js