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對象賦值的。遺憾的是，這意味著不能把這段代碼完整的封裝在建構函式中了，而這正是動態原型的主旨。