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 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
dojo 之基础篇
2007/03/24 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
详解VUE 数组更新
2017/12/16 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python名片管理系统开发
2020/06/18 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
安全资料员岗位职责范本
2014/06/28 职场文书
2014年加油站工作总结
2014/12/04 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Linux中如何安装并部署Redis
2022/04/18 Servers