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事件串连执行多个处理过程的方法
Mar 09 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
关于crontab的使用详解
2013/06/24 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
asp 的 分词实现代码
2007/05/24 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python实现简单的socket server实例
2015/04/29 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
使用python实现学生信息管理系统
2021/02/25 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
农业项目合作意向书
2015/05/08 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书