WEB入门之十一 JS面向对象

学习内容

JavaScript类的定义模式

JavaScript继承的实现

JavaScript抽象类

JavaScript解析XML

能力目标

深入了解JavaScript类的定义模式

理解JavaScript继承

理解JavaScript抽象类和虚函数

熟练使用JavaScript进行XML解析

本章简介

上一章学习了JavaScript高级编程，包括匿名函数、内部函数、回调函数以及使用JavaScript解析JSON格式的数据，另外还学习了基础的JavaScript面向对象编程，包括类的定义和对象的创建。本章继续深入学习JavaScript面向对象编程，会涉及到类的多种定义模式、继承、抽象类等高级内容。

核心技能部分

2.1 类的定义模式

JavaScript并不像C#、Java一样支持真正的类。但是在上一章，可以通过函数来模拟类的定义，实际上JavaScript支持多种类的定义模式，例如构造函数模式、原型模式等。

2.1.1 构造函数模式

构造函数模式是最常用的一种类的定义模式，上一章的示例1.6就是通过构造函数模式来定义类的。下面再使用构造函数模式定义一个Person类。参考代码如下所示。

示例2.1

上述代码使用一个函数模拟定义了一个School类

从运行结果来看，School函数执行了，同时zy获得了一个对象的引用。事实上，当new一个函数时，这个函数就表示构造函数，该函数里面的代码可以看做是为了初始化一个对象而工作。

构造函数通常没有返回值，并且在函数内部使用this关键字表示新创建的对象。构造函数首字母通常大写，这也是为了符合OOP的编码惯例，也为了跟普通函数进行区别。

在JavaScript中通过构造函数创建对象的过程总结如下：

1．浏览器解释器遇到new关键字时创建一个空对象

2．执行构造函数，并将this指针指向新建的对象

3．初始化属性和方法

4．函数执行完毕就返回初始化后的对象

2.1.2 原型模式

prototype即原型，它本身就是一个对象。每个函数（类）都有一个prototype属性（子对象），它表示类的成员集合。当使用new创建对象时，prototype对象的成员都会成为新建对象的成员。

我们首先通过一个例子来演示什么是prototype以及它的用法，参考代码如下所示。

示例2.2

上述代码首先定义了一个空类，然后使用prototype定义了该类的属性和方法，运行效果跟示例2.1一样。上述代码有一个问题就是每定义一个属性或方法就需要写一次School.prototype，我们可以做如下改进。

示例2.3

上述代码通过大括号把成员集中添加到了prototype对象上，写法更加简洁清晰。prototype对象专用于设计类的成员，是JavaScript实现面向对象编程的重要手段。在JavaScript中通过原型创建对象的过程总结如下：

1．浏览器解释器遇到new关键字时创建一个空对象

2．将this指针指向新建的对象

3．把prototype对象的所有成员赋给新建的对象

4．返回初始化后的对象

2.1.3 两种模式的不同之处

构造函数模式和原型模式都能定义类，但是这两种模式之间有着本质的区别。下面我们通过例子进行对比。

示例2.4

示例2.4使用的是前面的例子，通过构造函数定义了一个School类，并创建了该类的两个对象s1和s2。

在JavaScript中，函数就是类，所以School类中的teach函数其实就是一个对象。这会产生这样一个问题：每次创建一个School类的对象就会创建一个teach对象，而每个teach所实现的功能是一模一样的，没必要多次创建，这是通过构造函数定义类的一个缺点。

下面我们使用原型也定义一个和上面一样的School类，同样也创建该类的两个对象s1和s2，参考代码如下所示。

示例2.5

直接看运行效果，如图2.1.3所示。上述代码虽然使用new创建了两个对象，但是通过运行结果会发现，这两个对象中的成员的值一样，第2个对象采用的仍然是第1个对象的值。原型中的所有成员是被类的所有对象共享的，类似于Java类中的静态成员，即无法像构造函数那样创建不同的对象，这是通过原型定义类的一个缺点。

2.1.4 两种模式组合使用

由于构造函数模式和原型模式各有优缺点，所以在实际开发中通常组合使用两种模式来定义类。构造函数负责定义类中的属性，原型负责定义类中的方法，这样创建的每个对象就会有不同的属性值，同时又不会每次都创建类中的函数对象，节省了内存。

下面我们组合使用两种模式定义School类，参考代码如下所示。

示例2.6

上述代码通过带参的构造函数给属性传值，通过prototype定义方法。这种组合模式是ECMAScript中使用最广泛、认同度最高的一种定义类的方式。

2.2 继承

JavaScript没有专门的机制来实现继承。ECMAScript中提出了原型链的概念，并将原型链作为实现继承的主要方式，其基本思想是利用原型让一个自定义类继承另一个类的属性和方法。

示例2.7

上述代码定义了两个对象，分别是父类Person和子类Student。子类Student通过Student.prototype=new Person(); 继承了父类Person，这就是原型继承。另外，子类Student重写了父类Person中的sayHello方法，还定义了自己独有的属性score和方法getDetials。

需要注意的是：子类重写父类方法的代码以及定义自身独有方法的代码必须出现在原型继承Student.prototype=new Person(); 之后。

JavaScript也可以像Java一样，在定义子类时调用父类的构造方法为属性赋值。下面我们把示例2.7中的子类Student修改为带参数的构造方法，参考代码如下所示。

示例2.8

上述代码使用带参数的构造函数定义了一个子类Student，在子类的构造函数中使用Person.call(this,n,a,p);调用了父类的构造函数。call方法用来绑定到某个函数上进行自身调用，第一个参数this表示函数本身，后面的都是函数的参数。

2.3 解析XML

XML是指可扩展标记语言（Extensible  Markup  Language），类似于HTML。它是W3C的推荐标准，其设计宗旨是存储和传输数据而非显示数据。XML标签没有被预定义，需要开发人员自定义标签。

XML的主要作用可以概括为以下6个：

（1）使数据从HTML分离。

如果需要在HTML文档中显示动态数据，则每次数据改变时将花费大量的时间来编辑HTML。通过XML，数据能够存储在独立的XML文件中，从而专注地使用HTML进行布局和显示，且修改底层数据时无须再次对HTML进行任何改变。通过几行JavaScript即可读取一个外部XML文件，然后更新HTML中的数据内容。

（2）简化数据共享。

XML数据以纯文本格式进行存储，提供了一种独立软件和硬件的数据存储方法，使创建不同应用程序共享的数据变得更加容易。

（3）简化数据传输。

通过XML可以在不兼容的系统之间轻松交换数据。对于开发人员而言，在因特网上不兼容的系统之间交换数据特别耗费时间。可以通过各种不兼容的应用程序来读取数据，使用XML交换数据可以降低这种复杂性。

（4）简化平台的变更。

升级到新系统（硬件或软件平台）相对费时的情况下，不兼容的数据在转换大量的数据时经常丢失。XML数据以文本格式存储，这使XML可以在不丢失数据的前提下更易于扩展或升级到新的操作系统、应用程序或浏览器。

（5）延伸了数据使用。

XML独立于硬性、软件以及应用程序之外，使数据更可用、有用。不同的应用程序都能够在HTML页面以及XML数据源中访问。通过XML的数据不仅可以供各种阅读设备（手持计算机、语音设备、新闻阅读器等）使用，还可以供盲人等残障人士使用。

2.3.1 节点和节点树

根据DOM的规定，XML文档中每个单元（元素、属性、文本、注释等）都是节点。例如：

（1）整个文档是一个文档节点。

（2）每个XML标签是一个元素节点。

（3）包含在XML元素中的文本是文本节点。

（4）每个XML属性是一个属性节点。

（5）注释属于注释节点。

XML DOM将XML文档视为树结构，这种树结构被称为节点树。程序通过节点树访问所有节点、修改或删除其内容以及创建新元素。节点树展示了节点的集合以及它们之间的关系。节点树从根节点开始，在树的最低层级向文本节点长出“枝条”。

下面我们编写一个描述和存储图书信息的book.xml，并给出节点数的图形，参考代码如下所示。

示例2.9

J K. Rowling

2005

29.99

Giada De Laurentiis

2005

30.00

Erik T. Ray

2003

39.95

James McGovern

Per Bothner

Kurt Cagle

James Linn

Vaidyanathan Nagarajan

2003

49.99

将示例2.9中的books.xml使用节点树表示

下面我们分析一下book.xml文件：

（1）根节点是，文档中所有的其他节点都包含在中。

（2）根节点包含4个节点。

（3）第一个节点包含4个节点：";

text = text + "J K. Rowling";

text = text + "2005";

text = text + "";

text = text + "";

try

{

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = "false";

} catch (e) {

try

{

parser = new DOMParser();

xmlDoc = parser.parseFromString(text, "text/xml");

} catch (e) {

alert(e.message);

}

}

try {

xmlDoc.loadXML(text);

document.write("XML字符串已经加载完毕,可以进行解析了。");

} catch (e) {

alert(e.message);

}

节点操作通过XML DOM对象的属性和方法实现。对象多达几十个，并且每个对象都有各自的属性和方法，常用对象的属性和方法见

XML DOM对象常用属性

属性

说明

nodeName

获取节点名称

nodeValue

获取节点的值

parentNode

获取节点的父节点

childNodes

获取节点的所有子节点集合

attributes

获取当前节点所有的属性节点

documentElement

获取文档的根节点

表2-1-2  XML DOM对象常用方法

方法

说明

getElementsByTagName(name)

获取带有指定标签名（name）的所有元素

CreateElement(name)

创建指定标签名的元素节点

appendChild(node)

向调用节点末尾插入子节点node

removeChild(node)

从调用节点中删除子节点node

下面是一个通过XML DOM对象的属性和方法来解析book.xml的例子，参考代码如下所示。

示例2.14

对示例2.14的说明如下：

（1）xmlDoc：由解析器创建的XML Document对象，创建方式见示例2.13。

（2）getElementsByTagName("title")[0]：获取第一个