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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
js 小数取整的函数
May 10 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 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
PHP学习之正则表达式
2011/04/17 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php文件读取方法实例分析
2015/06/20 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python语言的变量认识及操作方法
2018/02/11 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python configparser模块常用方法解析
2020/05/22 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang