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 实现的全选和反选
Apr 15 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 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 输出缓存详解
2009/06/20 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
laravel请求参数校验方法
2019/10/10 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python类装饰器实现方法详解
2018/12/21 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
幼师自荐信范文
2013/10/06 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
《春雨》教学反思
2014/04/24 职场文书
十八大演讲稿
2014/05/22 职场文书
婚前协议书范本
2014/10/27 职场文书
营销经理工作检讨书
2014/11/03 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技