當前位置:才華齋>設計>網頁設計>

Javascript 繼承實現例子參考

網頁設計 閱讀(2.62W)

  1. 建立基類

Javascript 繼承實現例子參考

首先考慮Polygon類。哪些屬性和方法是必需的?首先,一定要知道多邊形的邊數,所以應該加入整數屬性sides。還有什麼是多邊形必需的?也許你想知道多邊形的面積,那麼加入計算面積的方法getArea()。圖4-3展示了該類的UML表示。

在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),使它顯得更清楚。

注意,雖然Polygon的建構函式只接受一個引數sides,Triangle類的建構函式卻接受兩個引數,即base和height。這因為三角形的邊數是已知的,且不想讓開發者改變它。因此,使用物件冒充時,3作為物件的邊數被傳給Polygon的建構函式。然後,把base和height的值賦予適當的屬性。

在用原型鏈繼承方法後,Triangle將覆蓋getArea()方法,提供為三角形面積定製的計算。

最後一個類是Rectangle,它也繼承Polygon。矩形有四條邊,面積是用長度×寬度計算的,長度和寬度即成為該類必需的屬性。在前面的UML圖中,要把Rectangle類填充在Triangle類的旁邊,因為它們的超類都是Polygon(如圖4-6所示)。

注意,Rectangle建構函式不把sides作為引數,同樣的,常量4被直接傳給Polygon建構函式。與Triangle相似,Rectangle引入了兩個新的作為建構函式的引數的屬性,然後覆蓋getArea()方法。

  3. 測試程式碼

可以執行下面程式碼來測試為該示例建立的程式碼:

這段程式碼建立一個三角形,底為12,高為4,還建立一個矩形,長為22,寬為10。然後輸出每種形狀的邊數及面積,證明sides屬性的賦值正確,getArea()方法返回正確的值。三角形的面積應為24,矩形的面積應該是220。

4. 採用動態原型方法如何?

前面的例子用物件定義的混合建構函式/原型方式展示繼承機制,那麼可以使用動態原型來實現繼承機制嗎?不能。

繼承機制不能採用動態化的.原因是,prototype物件的獨特本性。看下面程式碼(這段程式碼不正確,卻值得研究):

上面的程式碼展示了用動態原型定義的Polygon和Triangle類。錯誤在於突出顯示的設定otype屬性的程式碼。從邏輯上講,這個位置是正確的,但從功能上講,卻是無效的。從技術上說來,在程式碼執行前,物件已被例項化,並與原始的prototype物件聯絡在一起了。雖然用極晚繫結可使對原型物件的修改正確地反映出來,但替換prototype物件卻不會對該物件產生任何影響。只有未來的物件例項才會反映出這種改變,這就使第一個例項變得不正確。

要正確使用動態原型實現繼承機制,必須在建構函式外賦予新的prototype物件,如下所示:

這段程式碼有效,因為是在任何物件例項化前給prototype物件賦值的。遺憾的是,這意味著不能把這段程式碼完整的封裝在建構函式中了,而這正是動態原型的主旨。