### 一,面相对象继承机制
今天算是什么都没干,尽在了解面向对象三大特性之一的继承了,过去的学习的C++和C#都是正统的面向对象语言,学习的时候也没有怎么深入了解过,只是简单的学习最基础的继承。下午在看继承机制的时候,看到一个很经典的继承机制实例。这个实例使用UML很好的解释了继承机制。
说明继承机制最简单的方式是,利用一个经典的例子就是几何形状。实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边)。圆是椭圆的一种,它只有一个焦点。三角形、矩形和五边形都是多边形的一种,具有不同数量的边。正方形是矩形的一种,所有的边等长。这就构成了一种完美的继承关系,很好的解释了面向对象的继承机制。
在这个例子中,形状是椭圆形和多边形的基类(通常我们也可以叫它父类,所有类都由它继承而来)。椭圆具有一个属性(foci),说明椭圆具有的焦点的个数。圆形继承了椭圆形,因此圆形是椭圆形的子类,椭圆形是圆形的超类。同样,三角形、矩形和五边形都是多边形的子类,多边形是它们的超类。最后,正方形继承了矩形。
最好用图来解释这种继承关系,这是 UML(统一建模语言)的用武之地。UML的主要用途之一是,可视化地表示像继承这样的复杂对象关系。下面的图示是解释形状和它的子类之间关系的UML图示:
![](https://box.kancloud.cn/2016-04-28_57215590a9ade.jpg)
在UML中,每个方框表示一个类,由类名说明。三角形 、矩形和五边形顶部的线段汇集在一起,指向形状,说明这些类都由形状继承而来。同样,从正方形指向矩形的箭头说明了它们之间的继承关系。
### 二,ECMAScript继承机制的实现
要用ECMAScript实现继承机制,您可以从要继承的基类入手。所有开发者定义的类都可作为基类。出于安全原因,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击。
选定基类后,就可以创建它的子类了。是否使用基类完全由你决定。有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数。在这种情况下,基类被看作抽象类。尽管ECMAScript并没有像其他语言那样严格地定义抽象类,但有时它的确会创建一些不允许使用的类。通常,我们称这种类为抽象类。
创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。由于JS并不是正统的面向对象语言,一些名词也需要做出改变。
### 三,ECMAScript继承的方式
ECMAScript语言中将被继承的类(基类)称为超类型,子类(或派生类)称为子类型。和其他功能一样,ECMAScript实现继承的方式不止一种。这是因为JavaScript中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。下面为您介绍几种具体的继承方式。
(1)原型链方式
继承这种形式在ECMAScript中原本是用于原型链的。上一篇博文已经介绍了创建对象的原型方式。原型链扩展了这种方式,以一种有趣的方式实现继承机制。prototype对象是个模板,要实例化的对象都以这个模板为基础。总而言之,prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。我们来看一个例子:
~~~
function A() {//超类型A中必须没有参数
this.color = "red";
this.showColor = function () {
return this.color;
};
};
function B() {//子类型B
this.name = "John";
this.showName = function () {
return this.name;
};
};
B.prototype = new A();//子类型B继承了超类型A,通过原型,形成链条
var a = new A();
var b = new B();
document.write(a.showColor());//输出:blue
document.write(b.showColor());//输出:red
document.write(b.showName());//输出:John
~~~
在原型链中,instanceof运算符的运行方式也很独特。对B的所有实例,instanceof为A和B都返回true。
ECMAScript的弱类型世界中,这是极其有用的工具,不过使用对象冒充时不能使用它。例如:
~~~
var b = new B();
document.write(b instanceof A);//输出:true
document.write(b instanceof B);//输出:true
~~~
使用原型链方式实现了继承,但是这种方式无法共享和子类型给超类型传递参数。我们可以借用构造函数方式(也
就是对像冒充)的方式来解决这两个问题。
(2)对象冒充方式
对象冒充方式的其原理如下:构造函数使用this关键字给所有属性和方法赋值(即采用对象声明的构造函数方式)。因为构造函数只是一个函数,所以可使A构造函数成为B的方法,然后调用它。B就会收到A的构造函数中定义的属性和方法。例如,用下面的方式改写上面的例子创建对象A和B:
1call()方法
~~~
function A(Color) {//创建超类型A
this.color = Color;
this.showColor = function () {
return this.color;
};
};
function B(Color,Name) {//创建子类型B
A.call(this, Color);//对象冒充,给超类型传参
this.name = Name;//新添加的属性
this.showName =
};
var a = new A("blue");
var b = new B("red", "John");
document.write(a.showColor());//输出:blue
document.write(b.showColor());//输出:red
document.write(b.showName());//输出:John
~~~
2apply()方法
和上面call()方法唯一的区别就是在子类型B中的代码:
~~~
A.call(this,arguments);//对象冒充,给超类型传参
~~~
当然,只有超类型中的参数顺序与子类型中的参数顺序完全一致时才可以传递参数对象。如果不是,就必须创建一个单独的数组,按照正确的顺序放置参数。
使用对象冒充方式虽然解决了共享和传参的问题,但是没有原型,复用就更不可能了,所以我们组合上述的两种方式,即原型链方式和对象冒充的方式实现JS的继承。
(3)混合方式
这种继承方式使用构造函数定义类,并非使用任何原型。对象冒充的主要问题是必须使用构造函数方式,这不是最好的选择。不过如果使用原型链,就无法使用带参数的构造函数了。开发者如何选择呢?答案很简单,两者都用。
由于这种混合方式使用了原型链,所以instanceof运算符仍能正确运行。
在上一篇博文,创建对象的最好方式是用构造函数定义属性,用原型定义方法。这种方式同样适用于继承机制,用对象冒充继承构造函数的属性,用原型链继承prototype对象的方法。用这两种方式重写前面的例子,代码如下:
~~~
function A(Color) {
this.color = Color;
};
A.prototype.showColor = function () {
return this.color;
};
function B(Color, Name) {
A.call(this, Color);//对象冒充
this.name = Name;
};
B.prototype = new A();//使用原型链继承
B.prototype.showName = function () {
return this.name;
};
var a = new A("blue");
var b = new B("red", "John");
document.write(a.showColor());//输出:blue
document.write(b.showColor());//输出:red
document.write(b.showName());//输出:John
~~~
继承的方式和创建对象的方式有一定的联系,推荐使用的继承方式还时原型链和对象冒充的混合方式。使用这种
混合方式可以避免一些不必要的问题。
看这篇博文的时候,必须看一下前面的创建对象的方式:[轻松学习JavaScript十二:JavaScript基于面向对象之创](http://blog.csdn.net/erlian1992/article/details/50211229)[建对象(一)](http://blog.csdn.net/erlian1992/article/details/50211229)和[轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)](http://blog.csdn.net/erlian1992/article/details/50224073)。那么理解起来应该没有那么难了,
JS面向对象的一些概念时需要我们回过头来再理解的。
- 前言
- HTML学习1:Dreamweaver8的安装
- HTML学习2:初识HTML
- HTML学习3:常用标签之文本标签
- HTML学习4:常用标签之列表标签
- HTML学习5:常用标签之图像标签
- HTML学习6:常用标签之超链接标签
- HTML学习7:常用标签之表格标签
- HTML学习8:常用标签之框架标签
- HTML学习9:常用标签之表单标签
- HTML学习10:表单格式化
- HTML学习11:HTTP 方法
- HTML学习12:其他常见标签之头标签
- HTML学习13:其他常见标签之体标签
- 轻松学习JavaScript一:为什么学习JavaScript
- 轻松学习JavaScript二:JavaScript语言的基本语法要求
- 轻松学习JavaScript三:JavaScript与HTML的结合
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 轻松学习JavaScript五:JavaScript的变量和数据类型
- 轻松学习JavaScript六:JavaScript的表达式与运算符
- 轻松学习JavaScript七:JavaScript的流程控制语句
- 轻松学习JavaScript八:JavaScript函数
- 轻松学习JavaScript九:JavaScript对象和数组
- 轻松学习JavaScript十:JavaScript的Date对象制作一个简易钟表
- 轻松学习JavaScript十一:JavaScript基本类型(包含类型转换)和引用类型
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)
- 轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)
- 轻松学习JavaScript十四:JavaScript的RegExp对象(正则表达式)
- 轻松学习JavaScript十五:JavaScript之BOM简介
- 轻松学习JavaScript十六:JavaScript的BOM学习(一)
- 轻松学习JavaScript十七:JavaScript的BOM学习(二)
- 轻松学习JavaScript二十九:JavaScript中的this详解
- CSS基础学习一:CSS概述
- CSS基础学习二:如何创建 CSS
- CSS基础学习三:CSS语法
- CSS基础学习四:元素选择器
- CSS基础学习五:类选择器
- CSS基础学习六:id选择器
- CSS基础学习七:属性选择器
- CSS基础学习八:派生选择器
- CSS基础学习九:伪类
- CSS基础学习十:伪元素
- CSS基础学习十一:选择器的优先级
- CSS基础学习十二:CSS样式
- CSS基础学习十三:盒子模型
- CSS基础学习十四:盒子模型补充之display属性设置
- CSS基础学习十五:盒子模型补充之外边距合并
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- CSS基础学习十七:CSS布局之定位
- CSS基础学习十八:CSS布局之浮动
- CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效
- DIV+CSS实操一:经管系网页总体模块布局
- DIV+CSS实操二:经管系网页添加导航栏和友情链接栏
- DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息模块
- DIV+CSS实操四:经管系网页内容模块内容添加(一)
- DIV+CSS实操五:经管系网页内容模块内容添加(二)
- DIV+CSS实操六:经管系网页添加导航栏下拉菜单
- DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- JS中实现字符串和数组的相互转化