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的强大选择器小结
Dec 27 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
layui使用label标签的方法
Sep 14 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python文件写入write()的操作
2019/05/14 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
python中添加模块导入路径的方法
2021/02/03 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS