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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
js常用代码段整理
Nov 30 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
js重写方法的简单实现
Jul 10 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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中基本符号及使用方法
2010/03/23 PHP
PHP生成随机密码类分享
2014/06/25 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
JS location几个方法小姐
2008/07/09 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
javascript实现留言板功能
2020/02/08 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python实现从url中提取域名的几种方法
2014/09/26 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python实现在线翻译
2020/06/18 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
我的小天地教学反思
2014/04/30 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
信用卡工作证明范本
2015/06/19 职场文书
投诉信回复范文
2015/07/03 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android
python manim实现排序算法动画示例
2022/08/14 Python