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]：獲取第一個