javascript面向对象三大特征之多态实例详解

 更新时间:2019年07月24日 10:00:24   作者:Johnny丶me  
这篇文章主要介绍了javascript面向对象三大特征之多态,结合实例形式详细分析了javascript面向对象程序设计中多态的概念、原理,并结合实例形式总结了多态的实现方法与使用技巧,需要的朋友可以参考下

本文实例讲述了javascript面向对象三大特征之多态。分享给大家供大家参考,具体如下:

多态

从某种意义上来说,多态是面向对象中重要的一部分,也是实施继承的主要目的。

一个实例可以拥有多个类型,它既可以是这种类型,也可以是那种类型,这种多种状态被称为类的多态。

多态的表现形式很多,其中继承和重载都是多态的表现形式。

——整理自《jQuery开发从入门到精通》

继承

继承本身是多态的一种实现。详情请参考前面一篇:https://www.jb51.net/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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript设计模式之代理模式实例分析

    JavaScript设计模式之代理模式实例分析

    这篇文章主要介绍了JavaScript设计模式之代理模式,简单描述了代理模式的概念、原理并结合实例形式分析了javascript代理模式的相关实现与使用技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript 消息框效果【实现代码】

    JavaScript 消息框效果【实现代码】

    下面小编就为大家带来一篇JavaScript 消息框效果【实现代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • js获取USB扫码枪数据的方法

    js获取USB扫码枪数据的方法

    这篇文章主要为大家详细介绍了js获取USB扫码枪数据的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • uniapp使用百度地图的保姆式教学(适合初学者!)

    uniapp使用百度地图的保姆式教学(适合初学者!)

    公司项目中有地图展示和定位功能,所以下面这篇文章主要给大家介绍了关于uniapp使用百度地图的保姆式教学,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • layui form.render(''select'', ''test2'') 更新渲染的方法

    layui form.render(''select'', ''test2'') 更新渲染的方法

    今天小编就为大家分享一篇layui form.render('select', 'test2') 更新渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现放大镜效果

    JavaScript实现放大镜效果

    这篇文章主要为大家详细介绍了JavaScript实现放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 在JavaScript中call()与apply()区别

    在JavaScript中call()与apply()区别

    这篇文章主要介绍了在JavaScript中call()与apply()区别 的相关资料,需要的朋友可以参考下
    2016-01-01
  • 使用JS正则表达式 替换括号,尖括号等

    使用JS正则表达式 替换括号,尖括号等

    下面小编就为大家带来一篇使用JS正则表达式 替换括号,尖括号等。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • javascript css float属性的特殊写法

    javascript css float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的
    2008-11-11
  • Javascript实现数组中的元素上下移动

    Javascript实现数组中的元素上下移动

    这篇文章主要给大家介绍了Javascript实现数组中的元素上下移动的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-04-04

最新评论