javascript面向对象三大特征之多态实例详解


Posted in Javascript onJuly 24, 2019

本文实例讲述了javascript面向对象三大特征之多态。分享给大家供大家参考,具体如下:

多态

从某种意义上来说,多态是面向对象中重要的一部分,也是实施继承的主要目的。

一个实例可以拥有多个类型,它既可以是这种类型,也可以是那种类型,这种多种状态被称为类的多态。

多态的表现形式很多,其中继承和重载都是多态的表现形式。

——整理自《jQuery开发从入门到精通》

继承

继承本身是多态的一种实现。详情请参考前面一篇:https://3water.com/article/166097.htm

重载

重载也是多态的一种体现。重载就是同名方法的多个实现。依靠参数的类型和参数的个数来区分和识别。在js中,函数的参数是没有类型的,并且参数的个数是任意的。

例如:下面的add函数

function add(x,y){
 return x+y;
}

我们将其实现重载

function add(){
 var sum = 0;
 for(var i=0; i<arguments.length; i++) {
  if(typeof arguments[i] === 'number') {
   sum += arguments[i];
  }
 }
 return sum;
}

这样,不管参数类型如何,该函数会自动把数值类型参数相加并返回总数。

另外,结合instanceof 和constructor属性来判断每个参数类型,以决定根据参数个数和类型执行不同操作,这样可以实现更复杂的重载。

下面我们使用js的原型来设计类的多态特征。

function A(){
 this.get = function(){
  console.log('A');
 }
}
function B(){
 this.get = function(){
  console.log('B');
 }
}
B.prototype = new A(); // 使用原型继承,让B类继承A类
function C(){
 this.get = function(){
  console.log('C');
 }
}
C.prototype = new A(); // 使用原型继承,让B类继承A类
function F(x){
 this.x = x;
}
F.prototype.get = function(){
 // 判断是否为A类的实例
 if(this.x instanceof A){
  // 如果是,调用实例的方法
  this.x.get();
 }
}
// 下面开始
var b = new B();
var c = new C();
var f1 = new F(b); // 此时F中的this.x 就是b了, 而b是A的一个实例
var f2 = new F(c); // 原理同上
f1.get(); // B
f2.get(); // C

上面的类F就包含了一个多态方法get() ,它能够根据不同实例,来执行不同方法。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 #Javascript
javascript关于“时间”的一次探索
Jul 24 #Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 #Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 #Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
党课学习思想汇报
2014/01/02 职场文书
小学生秋游活动方案
2014/02/23 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2014年底个人工作总结
2015/03/10 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
创业计划书之寿司
2019/07/19 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
react国际化react-intl的使用
2021/05/06 Javascript
Redis中一个String类型引发的惨案
2021/07/25 Redis
详解Golang如何优雅的终止一个服务
2022/03/21 Golang