Javascript 继承实现例子
1. 创建基类
首先考虑Polygon类。哪些属性和方法是必需的？首先，一定要知道多边形的边数，所以应该加入整数属性sides。还有什么是多边形必需的？也许你想知道多边形的面积，那么加入计算面积的方法getArea()。图4-3展示了该类的UML表示。
图 4-3
在UML中，属性由属性名和类型表示，位于紧接类名之下的单元中。方法位于属性之下，说明方法名和返回值的类型。
在ECMAScript中，可以如下编写类：
注意，Polygon类不够详细精确，还不能使用，方法getArea()返回0，因为它只是一个占位符，以便子类覆盖。
2. 创建子类
现在考虑创建Triangle类。三角形具有三条边，因此这个类必须覆盖Polygon类的sides属性，把它设置为3。还要覆盖getArea()方法，使用三角形的面积公式，即1/2×底×高。但如何得到底和高的值呢？需要专门输入这两个值，所以必须创建base属性和height属性。Triangle类的UML表示如图4-4所示。
该图只展示了Triangle类的新属性及覆盖过的方法。如果Triangle类没有覆盖getArea()方法，图中将不会列出它。它将被看作从Polygon类保留下来的方法。完整的UML图还展示了Polygon和Triangle类之间的关系（图4-5），使它显得更清楚。
在UML中，决不会重复显示继承的属性和方法，除非该方法被覆盖（或被重载，这在ECMAScript中是不可能的）。
Triangle类的代码如下：
注意，虽然Polygon的构造函数只接受一个参数sides，Triangle类的构造函数却接受两个参数，即base和height。这因为三角形的边数是已知的，且不想让开发者改变它。因此，使用对象冒充时，3作为对象的边数被传给Polygon的构造函数。然后，把base和height的值赋予适当的属性。
在用原型链继承方法后，Triangle将覆盖getArea()方法，提供为三角形面积定制的计算。
最后一个类是Rectangle，它也继承Polygon。矩形有四条边，面积是用长度×宽度计算的，长度和宽度即成为该类必需的属性。在前面的UML图中，要把Rectangle类填充在Triangle类的旁边，因为它们的超类都是Polygon（如图4-6所示）。
图 4-6
Rectangle的ECMAScript代码如下：
注意，Rectangle构造函数不把sides作为参数，同样的，常量4被直接传给Polygon构造函数。与Triangle相似，Rectangle引入了两个新的作为构造函数的参数的属性，然后覆盖getArea()方法。
3. 测试代码
可以运行下面代码来测试为该示例创建的代码：
这段代码创建一个三角形，底为12，高为4，还创建一个矩形，长为22，宽为10。然后输出每种形状的边数及面积，证明sides属性的赋值正确，getArea()方法返回正确的值。三角形的面积应为24，矩形的面积应该是220。
4. 采用动态原型方法如何？
前面的例子用对象定义的混合构造函数/原型方式展示继承机制，那么可以使用动态原型来实现继承机制吗？不能。
继承机制不能采用动态化的原因是，prototype对象的独特本性。看下面代码（这段代码不正确，却值得研究）：
上面的代码展示了用动态原型定义的Polygon和Triangle类。错误在于突出显示的设置Triangle.prototype属性的代码。从逻辑上讲，这个位置是正确的，但从功能上讲，却是无效的。从技术上说来，在代码运行前，对象已被实例化，并与原始的prototype对象联系在一起了。虽然用极晚绑定可使对原型对象的修改正确地反映出来，但替换prototype对象却不会对该对象产生任何影响。只有未来的对象实例才会反映出这种改变，这就使第一个实例变得不正确。
要正确使用动态原型实现继承机制，必须在构造函数外赋予新的prototype对象，如下所示：
这段代码有效，因为是在任何对象实例化前给prototype对象赋值的。遗憾的是，这意味着不能把这段代码完整的封装在构造函数中了，而这正是动态原型的主旨。
相关推荐
-
js继承实现方法详解
本文实例讲述了js继承实现方法.分享给大家供大家参考,具体如下: var animal=function(name){ //构造函数 this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } animal.prototype.shout=function(){ //prototype主要作用:给类增加一个新的属性或函数 alert(this.name+"正在叫!"); }; ani
-
Javascript 类的继承实现代码
JavaScript中类的学习,从基本类继承过来方法 也可以这样实现: Java代码 复制代码 代码如下: function newClass(){ this.firstName="frank"; this.toUc=String.toUpperCase; this.toString=function(){ return this.toUc(this.firstName); } } var nc=new newClass(); alert(nc);//在IE中没反应.. functio
-
js的OOP继承实现(必看篇)
这里Student.prototype之所以使用create方法来创建,而不是直接赋Person.prototype的值,是因为如果使用赋值的话,两个就指向同一个对象,如果我们想要在student类上添加新的方法,就不行.所以要是哟呵那个create方法来让Person.prototype作为Student.prototype的原型 如果我们修改bosn的原型上的属性,那么bosn是会受到影响的.需要注意的是,我们发现,如果修改了bosn的原型对象,那么bosn是不会发生变化的.对于已经创建的实
-
js对象的构造和继承实现代码
复制代码 代码如下: <script> //定义js的user对象 function User(name,age){ this.name=name, this.age=age, this.getName=function(){ return this.name; }, this.getAge=function(){ return this.age; } } //实例化一个对象 var use=new User("aa",21); alert(use.name); alert
-
javascript 继承实现方法
下面我给出几种常用的方法: 1 .对象冒充 原理: 构造函数使用this关键字给所有属性和方法赋值, 因为构造函数只是一个函数,所以可以使ClassA的构造函数成为classB的方法,然后调用它.这样classB就会收到classA的构造函数中定义的属性和方法.例子: 复制代码 代码如下: function classA(name) { this.name=name; this.showName=function(){alert(this.name);} } function classB(na
-
javascript中的3种继承实现方法
使用Object.create实现类式继承 下面是官网的一个例子 //Shape - superclass function Shape() { this.x = 0; this.y = 0; } Shape.prototype.move = function(x, y) { this.x += x; this.y += y; console.info("Shape moved."); }; // Rectangle - subclass function Rectangle() {
-
JavaScript的9种继承实现方式归纳
不同于基于类的编程语言,如 C++ 和 Java,JavaScript 中的继承方式是基于原型的.同时由于 JavaScript 是一门非常灵活的语言,其实现继承的方式也非常多. 首要的基本概念是关于构造函数和原型链的,父对象的构造函数称为Parent,子对象的构造函数称为Child,对应的父对象和子对象分别为parent和child. 对象中有一个隐藏属性[[prototype]](注意不是prototype),在 Chrome 中是__proto__,而在某些环境下则不可访问,它指向的是这个
-
Javascript 继承实现例子
1. 创建基类 首先考虑Polygon类.哪些属性和方法是必需的?首先,一定要知道多边形的边数,所以应该加入整数属性sides.还有什么是多边形必需的?也许你想知道多边形的面积,那么加入计算面积的方法getArea().图4-3展示了该类的UML表示. 图 4-3 在UML中,属性由属性名和类型表示,位于紧接类名之下的单元中.方法位于属性之下,说明方法名和返回值的类型. 在ECMAScript中,可以如下编写类: 注意,Polygon类不够详细精确,还不能使用,方法getArea()返回0,因为
-
JavaScript 继承使用分析
深入学习javascript继承之前,先了解下面的几个概念: 父类:被继承的类 子类:由继承得来的类 超类:也就是父类 抽象类:一般不用来实例化的类,它的用途是用来给其他类继承. 基类:提供给其他类可以继承的类 派生类:由基类继承而来的类 javascript对象继承通常有下面的5种方式: 1.对象冒充 2.call()方式 3.apply()方式 4.原型链 5.混合方式 A.对象冒充 所谓对象冒充,就是新的类冒充旧的类(旧的类必须采用构造函数方式),从而达到继承目的. eg.1 复制代码 代
-
JavaScript 继承详解（一）
面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包
-
JavaScript继承学习笔记【新手必看】
JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承.实现继承的方法很多,下面就只是其中的几种. 一. 原型链继承 function Person() { //被继承的函数叫做超类型(父类,基类) this.name='mumu'; this.age='18'; } Person.prototype.name='susu';//当属性名相同时需就近原则,先在实
-
JavaScript 继承详解 第一篇
面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包
-
详解Javascript继承的实现
本文从以下四个方面展开话题: •1. 混合方式实现及问题 •2. 期望的调用方式 •3. 继承库的详细实现 •4. 总结 感兴趣的朋友可以继续往下阅读详情. 我最早掌握的在js中实现继承的方法是在xx学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用原型链继承父类prototype 对象的方法,满足我遇到过的所有继承的场景.正因如此,我从没想过下次写继承的时候,我要换一种方式来写,直到今天晚上看了三生
-
javascript继承的六大模式小结
1.原型链 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubV
-
javascript 继承学习心得总结
看了不少js继承的东西也该总结总结了. 先说一下大概的理解,有不对的还望指正,也好更正一下三观.另外说明下,下面的例子并非原创基本就是改了个变量名啥的,有的甚至直接拿过来用的. js继承是用来干啥的: 首先说js没有真正的跟其他面向对象的语言一样概念的继承,js里边所说的继承是指模拟继承. 具体js继承是干啥呢,刚开始做前端的时候我是用来面试的(最早写些小效果的时候基本用不到,为啥要看呢,因为面试官很爱问这个问题啊),所以就看看大概的,面试时候能说个大概,在这个问题上算是面试党了.后来跟着慢慢的
-
JavaScript 继承的实现
面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包
-
夯基础之手撕javascript继承详解
前言 提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都9012年了面试官还不放过我. ok,开开玩笑,接下来言归正传,来聊聊js继承这个经典的话题. JS的"类" javascript不像java,php等传统的OOP语言,js本身并没有类这个概念,那么它是怎么实现类的模拟呢? 构造函数方式 原型方式 混合方式 构造函数方式 Function Foo (name) { this.name = name thi