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 相关文章推荐
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
Javascript的表单验证长度
Mar 16 Javascript
JS中substring与substr的用法
Nov 16 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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/12/28 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
Vue表单实例代码
2016/09/05 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
python encode和decode的妙用
2009/09/02 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
公务员转正考察材料
2014/02/07 职场文书
学徒工职责
2014/03/06 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
2016春节家属慰问信
2015/03/25 职场文书
小学生读书笔记范文
2015/06/30 职场文书
预备党员表决心的话
2015/09/22 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技