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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
心扬JS分页函数代码
Sep 10 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
JS中min函数实例讲解
Feb 18 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
javascript实现拼图游戏
Jan 29 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
微信支付扫码支付php版
2016/07/22 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
python中global用法实例分析
2015/04/30 Python
详解Python发送邮件实例
2016/01/10 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Keras 使用 Lambda层详解
2020/06/10 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
数据库面试要点基本概念
2013/10/31 面试题
优秀女职工事迹材料
2014/02/06 职场文书
汇源肾宝广告词
2014/03/20 职场文书
消防安全宣传口号
2014/06/10 职场文书
计算机求职信
2014/07/02 职场文书
小学家长学校培训材料
2014/08/24 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
检讨书格式
2015/05/07 职场文书
卖车协议书范文
2016/03/23 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL