Javascript 繼承實現(xiàn)例子
1. 創(chuàng)建基類
首先考慮Polygon類。哪些屬性和方法是必需的?首先,一定要知道多邊形的邊數(shù),所以應(yīng)該加入整數(shù)屬性sides。還有什么是多邊形必需的?也許你想知道多邊形的面積,那么加入計算面積的方法getArea()。圖4-3展示了該類的UML表示。
圖 4-3
在UML中,屬性由屬性名和類型表示,位于緊接類名之下的單元中。方法位于屬性之下,說明方法名和返回值的類型。
在ECMAScript中,可以如下編寫類:
注意,Polygon類不夠詳細(xì)精確,還不能使用,方法getArea()返回0,因為它只是一個占位符,以便子類覆蓋。
2. 創(chuàng)建子類
現(xiàn)在考慮創(chuàng)建Triangle類。三角形具有三條邊,因此這個類必須覆蓋Polygon類的sides屬性,把它設(shè)置為3。還要覆蓋getArea()方法,使用三角形的面積公式,即1/2×底×高。但如何得到底和高的值呢?需要專門輸入這兩個值,所以必須創(chuàng)建base屬性和height屬性。Triangle類的UML表示如圖4-4所示。
該圖只展示了Triangle類的新屬性及覆蓋過的方法。如果Triangle類沒有覆蓋getArea()方法,圖中將不會列出它。它將被看作從Polygon類保留下來的方法。完整的UML圖還展示了Polygon和Triangle類之間的關(guān)系(圖4-5),使它顯得更清楚。
在UML中,決不會重復(fù)顯示繼承的屬性和方法,除非該方法被覆蓋(或被重載,這在ECMAScript中是不可能的)。
Triangle類的代碼如下:
注意,雖然Polygon的構(gòu)造函數(shù)只接受一個參數(shù)sides,Triangle類的構(gòu)造函數(shù)卻接受兩個參數(shù),即base和height。這因為三角形的邊數(shù)是已知的,且不想讓開發(fā)者改變它。因此,使用對象冒充時,3作為對象的邊數(shù)被傳給Polygon的構(gòu)造函數(shù)。然后,把base和height的值賦予適當(dāng)?shù)膶傩浴?/P>
在用原型鏈繼承方法后,Triangle將覆蓋getArea()方法,提供為三角形面積定制的計算。
最后一個類是Rectangle,它也繼承Polygon。矩形有四條邊,面積是用長度×寬度計算的,長度和寬度即成為該類必需的屬性。在前面的UML圖中,要把Rectangle類填充在Triangle類的旁邊,因為它們的超類都是Polygon(如圖4-6所示)。
圖 4-6
Rectangle的ECMAScript代碼如下:
注意,Rectangle構(gòu)造函數(shù)不把sides作為參數(shù),同樣的,常量4被直接傳給Polygon構(gòu)造函數(shù)。與Triangle相似,Rectangle引入了兩個新的作為構(gòu)造函數(shù)的參數(shù)的屬性,然后覆蓋getArea()方法。
3. 測試代碼
可以運行下面代碼來測試為該示例創(chuàng)建的代碼:
這段代碼創(chuàng)建一個三角形,底為12,高為4,還創(chuàng)建一個矩形,長為22,寬為10。然后輸出每種形狀的邊數(shù)及面積,證明sides屬性的賦值正確,getArea()方法返回正確的值。三角形的面積應(yīng)為24,矩形的面積應(yīng)該是220。
4. 采用動態(tài)原型方法如何?
前面的例子用對象定義的混合構(gòu)造函數(shù)/原型方式展示繼承機(jī)制,那么可以使用動態(tài)原型來實現(xiàn)繼承機(jī)制嗎?不能。
繼承機(jī)制不能采用動態(tài)化的原因是,prototype對象的獨特本性??聪旅娲a(這段代碼不正確,卻值得研究):
上面的代碼展示了用動態(tài)原型定義的Polygon和Triangle類。錯誤在于突出顯示的設(shè)置Triangle.prototype屬性的代碼。從邏輯上講,這個位置是正確的,但從功能上講,卻是無效的。從技術(shù)上說來,在代碼運行前,對象已被實例化,并與原始的prototype對象聯(lián)系在一起了。雖然用極晚綁定可使對原型對象的修改正確地反映出來,但替換prototype對象卻不會對該對象產(chǎn)生任何影響。只有未來的對象實例才會反映出這種改變,這就使第一個實例變得不正確。
要正確使用動態(tài)原型實現(xiàn)繼承機(jī)制,必須在構(gòu)造函數(shù)外賦予新的prototype對象,如下所示:
這段代碼有效,因為是在任何對象實例化前給prototype對象賦值的。遺憾的是,這意味著不能把這段代碼完整的封裝在構(gòu)造函數(shù)中了,而這正是動態(tài)原型的主旨。
相關(guān)文章
js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法,涉及JavaScript數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)
阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)...2007-05-05深入理解JS中Number(),parseInt(),parseFloat()三者比較
這篇文章主要介紹了JS中Number(),parseInt(),parseFloat()三者比較,需要的朋友可以參考下2018-08-08淺談async、defer以普通script加載的區(qū)別
本文主要介紹了淺談async、defer以普通script加載的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Webpack-cli安裝成功后查看webpack -v報錯案例詳解
這篇文章主要介紹了Webpack-cli安裝成功后查看webpack -v報錯案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法,感興趣的小伙伴們可以參考一下2016-03-03