Javascript对象继承

最新推荐文章于 2023-07-28 20:35:47 发布
最新推荐文章于 2023-07-28 20:35:47 发布
阅读量556 收藏 1
点赞数
分类专栏： ext js 文章标签： javascript function prototype 编程 语言 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuilv2000/article/details/4534551
版权

在面向对象的编程方法中，对象继承是必不可少的，那么怎么在javascript中实现继承机制呢。由于javascript并不是一个严格的面向对象的语言，因此在对象继承上也显的不一样。我们也来创建一个基类Polygon，代表一个多边形，一个多边形有个共同的属性就是边数(sides)和一个共同的方法计算面积(getAreas)。这样我们的这具Polygon类看起来就像下面这样定义：

function  Polygon(iSides)
 {
    this.sides = iSides;
}

Polygon.prototype.getAreas  =   function ()
 {
    return 0;
}

因为基类并不能确定面积，因此在这里我们返回为0。
接着我们就创建一个子类Triangle,一个三角形，显然这个三角形是要从多边形继承的，因此我们要让这个Triangle类继承Polygon类，并且要覆盖Polygon类的getAreas方法来返回三角形的面积。我们来看下在javascript中的实现：

function  Triangle(iBase, iHeight)
 {
    Polygon.call(this,3);      //在这里我们用Polygon.call()来调用Polygon的构造函数，并将3作为参数，表示这是一个三角形，因为边是确定的，所以在子类的构造函数中就不需要指定边了
    this.base = iBase;         //三角形的底
    this.height = iHeight;     //三角形的高
}

Triangle.prototype  =   new  Polygon();
Triangle.prototype.getAreas  =   function ()
 {
    return 0.5 * this.base *this.height;  //覆盖基类的getAreas方法，返回三角形的面积
}

参考上面的实现，我们再定义一个矩形：

function  Rectangle(iWidth, iHeight)
 {
    Polygon.call(this,4);//用对象冒充继承构造函数的属性   
    this.width = iWidth;
    this.height = iHeight;
}

Rectangle.prototype  =   new  Polygon();//用原型链继承prototype对象的方法
Rectangle.prototype.getAreas  =   function ()
 {
    return this.width * this.height;
}


好了，上面我们定义了一个基类和两个子数，下面我们来测试一个这两个子类是否能正常工作：

var  t  =   new  Triangle( 3 , 6 );
 var  r  =   new  Rectangle( 4 , 5 );

alert(t.getAreas());     // 输出9说明正确
alert(r.getAreas());     // 输出20说明正确
2、类的定义采用动态原型方式-继承无法利用动态原型方式实现
Javascript代码 复制代码
  1. function Polygon(iSides){   
  2.     this.sides=iSides;   
  3.     if(typeof Polygon._initialized_=="undefined"){   
  4.         Polygon.prototype.getArea=function(){   
  5.             return 0;   
  6.         }   
  7.      }   
  8.      Polygon._initialized_=true;   
  9. }   
  10. function Triangle(iLength,iWidth){   
  11.     Polygon.call(this,3);   
  12.     this.length=iLength;   
  13.     this.width=iWidth;   
  14.     if(typeof Triangle._initialized_=="undefined"){   
  15.     Triangle.prototype=new Polygon();   
  16.     Triangle.prototype.getArea=function(){   
  17.         return (this.length)*(this.width);   
  18.         }   
  19.     }   
  20.     Triangle._initialized_=true;   
  21. }   
  22. var oTriangle=new Triangle(4,8);   
  23. //控制台输出错误消息"oTriangle.getArea is not a function"   
  24. alert(oTriangle.getArea());  

继承无法利用动态原型方式实现，原因在于prototype的特性，问题主要是由下面代码的位置因此的：Triangle.prototype=new Polygon(); 因为在代码运行前，对象已被实例化，并与原始的prototype对象联系在了一起。虽然用极晚绑定可使对原型对象的修改正确地表现出来，但替换 prototype对象却不会对该对象产生任何影响。只有未来的实例才会反映出这种改变，所以上面的例子会出现错误。代码进行下面的修改以后，就可以正常运行了。
Javascript代码 复制代码
  1. function Polygon(iSides){   
  2.     this.sides=iSides;   
  3.     if(typeof Polygon._initialized_=="undefined"){   
  4.         Polygon.prototype.getArea=function(){   
  5.             return 0;   
  6.         }   
  7.      }   
  8.      Polygon._initialized_=true;   
  9. }   
  10. function Triangle(iLength,iWidth){   
  11.     Polygon.call(this,3);   
  12.     this.length=iLength;   
  13.     this.width=iWidth;   
  14.     if(typeof Triangle._initialized_=="undefined"){   
  15.     Triangle.prototype.getArea=function(){   
  16.         return 0.5*(this.length)*(this.width);   
  17.         }   
  18.     }   
  19.     Triangle._initialized_=true;   
  20. }   
  21. Triangle.prototype=new Polygon();   
  22. var oTriangle=new Triangle(4,8);   
  23. alert(oTriangle.getArea());//16  

3、其他的继承方式--zInherit
（1）利用inheritfrom重写Polygon类
Jjavascript代码 复制代码
  1. function Polygon(iSides){   
  2.     this.sides=iSides;   
  3. }   
  4. Polygon.prototype.getArea=function(){   
  5.     return 0;   
  6. }   
  7. function Triangle(iBase,iHeight){   
  8.     Polygon.call(this,3);   
  9.     this.base=iBase;   
  10.     this.height=iHeight;   
  11. }   
  12. Triangle.prototype.inheritFrom(Polygon);   
  13. Triangle.prototype.getArea=function(){   
  14.     return 0.5*(this.base)*(this.height);   
  15. }   
  16. function Rectangle(iLength,iWidth){   
  17.     Polygon.call(this,4);   
  18.     this.length=iLength;   
  19.     this.width=iWidth;   
  20. }   
  21. Rectangle.prototype.inheritFrom(Polygon);   
  22. Rectangle.prototype.getArea=function(){   
  23.     return (this.length)*(this.width);   
  24. }   
  25. var oTri=new Triangle(4,8);//16  
  26. alert(oTri.getArea());   
  27. var oRec=new Rectangle(4,8);//32  
  28. alert(oRec.getArea());   
  29. alert(oTri.instanceOf(Polygon));//true   
  30. alert(oTri.instanceOf(Triangle));//true   
  31. alert(oRec.instanceOf(Polygon));//true   
  32. alert(oRec.instanceOf(Rectangle));//true  

（2）动态原型支持
动态原型支持：原型链方式不能真正符合动态原型的主旨，即把类的所有代码放置在它的构造函数中。这种方法实现的原因是，使用inheritForm()方法时，并未重写prototype对象，只是为其加入方法而已。使用这种方法，即可避开原型链的限制，实现动态原型本意。
Javascript代码 复制代码
  1. //dinamic prototype support   
  2. function Polygon(iSides){   
  3.     this.sides=iSides;   
  4.     if(typeof Polygon._initialized_=="undefined"){   
  5.         Polygon.prototype.getArea=function(){   
  6.             return 0;   
  7.         }   
  8.     }   
  9.     return Polygon._initialized_=true;   
  10. }   
  11. function Triangle(iBase,iHeight){   
  12.     Polygon.call(this,3);   
  13.     this.base=iBase;   
  14.     this.height=iHeight;   
  15.     if(typeof Triangle._initialized_=="undefined"){   
  16.         Triangle.prototype.inheritFrom(Polygon);   
  17.         Triangle.prototype.getArea=function(){   
  18.             return 0.5*(this.base)*(this.height);   
  19.         }   
  20.     }   
  21.     Triangle._initialized_=true;   
  22. }   
  23. function Rectangle(iLength,iWidth){   
  24.     Polygon.call(this,4);   
  25.     this.length=iLength;   
  26.     this.width=iWidth;   
  27.     if(typeof Rectangle._initialized_=="undefined"){   
  28.         Rectangle.prototype.inheritFrom(Polygon);   
  29.         Rectangle.prototype.getArea=function(){   
  30.             return (this.length)*(this.width);   
  31.         }   
  32.     }   
  33.     Rectangle._initialized_=true;   
  34. }   
  35. var tri=new Triangle(4,8);   
  36. alert(tri.getArea());//16   
  37. alert(tri.instanceOf(Polygon));//true   
  38. alert(tri.instanceOf(Triangle));//true   
  39. var rec=new Rectangle(4,8);   
  40. alert(rec.getArea());//32   
  41. alert(rec.instanceOf(Polygon));//true   
  42. alert(rec.instanceOf(Rectangle));//true  

（3）多重继承支持
多重继承支持：zInherit库最有用的特性之一是支持多重继承，原型链不支持多重继承。同样利用inheritForm()方法实现。要继承属性和方法，inheritForm()方法必须与对象冒充一起使用，注意这里使用的是apply()方法。一般来说，按照继承属性的顺序继承方法比较好。
Javascript代码 复制代码
  1. //multiple inheritance support   
  2. function ClassA(){   
  3.     this.messageA="the message of Class A";   
  4.     if(typeof ClassA._initialized_=="undefined"){   
  5.         ClassA.prototype.showMessageA=function(){   
  6.             alert(this.messageA);   
  7.         };   
  8.     ClassA._initialized_=true;   
  9.     }   
  10. }   
  11. function ClassB(){   
  12.     this.messageB="the message of Class B";   
  13.     if(typeof ClassB._initialized_=="undefined"){   
  14.         ClassB.prototype.showMessageB=function(){   
  15.             alert(this.messageB);   
  16.         };   
  17.     ClassB._initialized_=true;   
  18.     }   
  19. }   
  20. function ClassC(){   
  21.     ClassA.apply(this);   
  22.     ClassB.apply(this);   
  23.     this.messageC="the message of Class C";   
  24.     if(typeof ClassC._initialized_=="undefined"){   
  25.         ClassC.prototype.inheritFrom(ClassA);   
  26.         ClassC.prototype.inheritFrom(ClassB);   
  27.         ClassC.prototype.showMessageC=function(){   
  28.             alert(this.messageC);   
  29.         };   
  30.     ClassC._initialized_=true;   
  31.     }   
  32. }      
  33. var cClass=new ClassC();   
  34. cClass.showMessageA();//the message of Class A   
  35. cClass.showMessageB();//the message of Class B   
  36. cClass.showMessageC();//the message of Class C  
shuilv2000
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解javascript对象继承
10-22
JavaScript对象继承是面向对象编程中的核心概念，它允许一个对象（子对象）获取另一个对象（父对象或基对象）的属性和方法。这种方式使得代码复用和组织更加有效。本文将详细探讨JavaScript对象继承的不同实现方式...
uberproto:JavaScript对象继承糖
05-25
Uberproto是一个简单的基础对象，它为JavaScript中的ECMAScript 5样式对象继承添加了一些糖。 简而言之，这是它的作用： 轻松扩展对象 初始化方法 超级方法 混合蛋白 方法代理 占用空间小（最小约0.5Kb）并且仅...
“JavaScript继承方法大全：选择最适合你的继承方式！“
alive_new的博客
05-02 123
以上是js继承的一些方法，每种继承方式都有其优缺点和适用场景，我们需要根据具体的情况选择合适的继承方式。在实际开发中，我们通常会使用 ES6 中的类继承方式，它更加直观、易于理解和维护。通过理解和应用不同的继承方式，我们可以更好地实现面向对象编程，并编写出更加高效、简洁和可维护的代码。
js继承对象的方式
晚安
05-12 314
原型链继承是JavaScript中最常用的继承方式之一，它通过将子类的原型指向父类的实例来实现继承。组合继承是将原型链继承和借用构造函数继承结合起来的一种继承方式。这种方式的优点是既能继承父类原型链上的属性和方法，又能避免父类引用类型属性被所有子类实例共享的问题。原型式继承是通过创建一个临时构造函数，将一个对象作为该构造函数的原型，然后返回该构造函数的实例来实现继承。这种方式的缺点是不能继承父类原型链上的属性和方法。优点：集合了【原型式继承】和【盗用构造函数继承】的优点，效率比【组合继承】更高。
JavaScript 继承的7种实现方式
weixin_44244924的博客
04-25 639
JavaScript 继承的7种实现方式
javascript中对象的继承方式
Amelian的博客
12-22 127
1.构造函数继承 function animal() { this.type = "动物" } function Cat(name, price) { animal.call(this, arguments)/*改变this指向*/ this.name = name; this.price = price; } var cat1 = new Cat('tom', '$8888') console.log('输出继承自构造函数animal的属性type值', cat1.type) 2.
前端新手必读：JS继承的5种方式
最新发布
dlcxycg的博客
07-28 776
今天我要为大家介绍一下JavaScript中继承的5种方式，并分析它们各自的优缺点。希望通过本文的分享，能够帮助前端新手更好地理解和运用继承的概念。
javascript 面向对象继承
10-29
### JavaScript面向对象继承详解 #### 一、引言 JavaScript是一种多范式的编程语言，它支持面向对象编程（OOP）和其他多种编程风格。在面向对象编程中，“继承”是一项非常重要的特性，允许子类继承父类的属性和...
Javascript 面向对象 继承
10-29
继承是面向对象中比不可少的特性，但javascript中并没有继承的概念机制，但我们可以自己来实现这种功能。
js对象继承的5种方法
jiangjunyuan168的博客
04-15 4586
1、原型链继承 假设现在有a,b两个函数，b函数的实例如果想要访问a函数的属性和方法。就可以通过b函数的原型（b.prototype）指向a的实例（new a()）来实现，这种继承方法就称为原型链继承。 代码实现： 这里用 parent 和 child 分别表示上述的 a 和 b function parent(){ this.a = '111' } function child(){} child.prototype = new parent() var c = new child() c
JavaScript如何实现继承？
pakerder的博客
10-03 1428
由于通过原型链层层遍历可能带来性能问题，当试图访问不存在的属性时，会遍历整个原型链。在原型链上查找比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。因此，我们在设计对象的时候，要注意原型链的长度。除了通过原型链的方式实现JavaScript的继承，JavaScript中实现继承的方式还有：其中，原型链继承方式中引用类型的属性被所有实例共享，无法做到实例私有；经典继承方式可以实现实例属性私有，但要求类型只能通过构造函数来定义虽然继承的方式有很多种，但实际上都离不开原型对象与原型链的内容。
js对象继承
LUZENG_SA的博客
08-19 552
继承是面向对象编程中讨论最多的话题。很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。
javascript中继承的几种方式
m0_63153901的博客
06-12 3957
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。通过实例化一个函数使子类的原型指向父类的实例，子类就可以调用到父类的属性和方法。代码实现如下： 要注意的问题 1.不要忘记默认的类型： 在js中所有的引用类型都继承了Object，而继承也是通过原型链实现的。所有存在于Object原型对象上的方法同样也存在。比如：hasOwnProperty()、toString(
说说 JavaScript 如何实现对象继承
读万卷书，行万里路
03-23 3157
1 原型链可以利用 JavaScript 原型，让一个引用类型继承另一个引用类型的属性和方法：//父类 function SuperType() { this.property = true; }SuperType.prototype.getSuperValue = function () { return this.property; };//子类 function SubType
javascript对象继承中的问题
zj1206358260的博客
10-01 259
问题一：新创建的对像属性值一样 创建如下所示的javascript对象，并执行代码： function Person(name ,age ,sex ,weight){ this.name = name; this.age = age; this.sex = sex; this.weight = weight; } Person.pro...
理解js的对象，对象创建，继承
sqliang的专栏
11-28 645
js对象概述理解js对象js对象的属性在创建时都带有一些特征值，js通过这些特征值来定义它们的行为。属性类型1.数据属性数据属性包含一个数据值的位置，在这个位置可以读取和写入值2.访问器属性定义多个属性读取属性的特性创建对象 虽然Object构造函数，对象字面量都可以来创建对象，但这些方式有个缺点：在使用同一个接口创建很多对象的时候，会产生大量重复代码，所以在创建对象的时候，可以使用一些模式来进
JavaScript 的对象继承方式，有几种写法？
前端大全
11-11 523
（给前端大全加星标，提升前端技能）作者：peakednesshttps://my.oschina.net/u/3970421/blog/2872629一、对象冒充其原理如...
Java基础教程25-继承
Anthony_tester的博客
06-14 2177
本文介绍Java中的继承，Java有三大特性：封装，继承和多态。我们先来简单了解下什么是继承？为什么要使用继承？在现实生活中，我们有很多继承的例子，例如儿子某些特征像他父亲，就可以说儿子这些特征是从他父亲上继承过来的。所以，Java中有了父类和子类的说法，父类就是被继承的类，子类就是将要继承父类的类。使用继承，是为了减少代码的重复，增加代码的复用性。下面我们举例来简单介绍继承。我们的父类是多边形类
JavaScript对象继承
落枫秋歌
08-13 545
通常的面向对象的编程支持两种继承方式：接口继承和实现继承；ECMAScript中仅支持实现继承；原型链继承原型链继承方式的实质是用一个新类型的实例重写原型对象；显然这种方式不能使用字面量形式重写prototype； 该方式的缺点：一是原型中包含引用类型时一个实例对原型的引用类型值改变会影响到其他所有的实例对象；二是创建子类实例时无法在不影响其他子类实例的情况下向父类构造函数传递参数；// 原型链继
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值