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 的dialog和ztree结合实现步骤
Aug 02 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
详解React开发必不可少的eslint配置
Feb 05 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP4实际应用经验篇(8)
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
js闭包用法实例详解
2016/12/13 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
python 将字符串转换成字典dict
2013/03/24 Python
python求素数示例分享
2014/02/16 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
django 自定义过滤器的实现
2019/02/26 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python随机数函数代码实例解析
2020/02/09 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
政府门卫岗位职责
2014/04/29 职场文书
公司节能减排倡议书
2014/05/14 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
电影雨中的树观后感
2015/06/15 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
如何理解python接口自动化之logging日志模块
2021/06/15 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技