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几秒以后倒计时跳转示例
Dec 26 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php排序算法实例分析
2016/10/17 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
可输入的下拉框
2006/06/19 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python中map()与zip()操作方法
2016/02/27 Python
Python实现网站表单提交和模板
2019/01/15 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
农村婚礼证婚词
2014/01/08 职场文书
大学生演讲稿范文
2014/01/11 职场文书
服务之星获奖感言
2014/01/21 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
高三英语复习计划
2015/01/19 职场文书
行为习惯主题班会
2015/08/14 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript