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的运行机制和设计理念分析
Apr 05 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python之变量类型和if判断方式
2020/05/05 Python
python爬取音频下载的示例代码
2020/10/19 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
车队安全员岗位职责
2015/02/15 职场文书
大客户经理岗位职责
2015/04/09 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
创业计划书之养殖业
2019/10/11 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server