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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
企业消防安全制度
2014/02/02 职场文书
党员岗位承诺书
2014/03/25 职场文书
企业领导对照检查材料
2014/08/20 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
委托公证书样本
2015/01/23 职场文书
家长会感言
2015/08/01 职场文书
离婚财产分割协议书
2015/08/11 职场文书
python实现网络五子棋
2021/04/11 Python
pytorch Dropout过拟合的操作
2021/05/27 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript