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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
基于文本的留言簿
2006/10/09 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
ES6的新特性概览
2016/03/10 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python实现学生成绩管理系统
2020/04/05 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python执行时间的几种计算方法
2020/07/31 Python
幼儿园中班教学反思
2014/02/10 职场文书
自我鉴定总结
2014/03/24 职场文书
最美护士演讲稿
2014/08/27 职场文书
师德承诺书
2015/01/20 职场文书
新郎新娘致辞
2015/07/31 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
设置IIS Express并发数
2022/07/07 Servers
JS class语法糖的深入剖析
2022/07/07 Javascript