- 相關(guān)推薦
Javascript 繼承實(shí)現(xiàn)例子參考
1. 創(chuàng)建基類
首先考慮Polygon類。哪些屬性和方法是必需的？首先，一定要知道多邊形的邊數(shù)，所以應(yīng)該加入整數(shù)屬性sides。還有什么是多邊形必需的？也許你想知道多邊形的面積，那么加入計(jì)算面積的方法getArea()。圖4-3展示了該類的UML表示。
在UML中，屬性由屬性名和類型表示，位于緊接類名之下的單元中。方法位于屬性之下，說(shuō)明方法名和返回值的類型。
在ECMAScript中，可以如下編寫類：
注意，Polygon類不夠詳細(xì)精確，還不能使用，方法getArea()返回0，因?yàn)樗皇且粋�(gè)占位符，以便子類覆蓋。
2. 創(chuàng)建子類
現(xiàn)在考慮創(chuàng)建Triangle類。三角形具有三條邊，因此這個(gè)類必須覆蓋Polygon類的sides屬性，把它設(shè)置為3。還要覆蓋getArea()方法，使用三角形的面積公式，即1/2×底×高。但如何得到底和高的值呢？需要專門輸入這兩個(gè)值，所以必須創(chuàng)建base屬性和height屬性。Triangle類的UML表示如圖4-4所示。
該圖只展示了Triangle類的新屬性及覆蓋過(guò)的方法。如果Triangle類沒(méi)有覆蓋getArea()方法，圖中將不會(huì)列出它。它將被看作從Polygon類保留下來(lái)的方法。完整的UML圖還展示了Polygon和Triangle類之間的關(guān)系（圖4-5），使它顯得更清楚。
注意，雖然Polygon的構(gòu)造函數(shù)只接受一個(gè)參數(shù)sides，Triangle類的構(gòu)造函數(shù)卻接受兩個(gè)參數(shù)，即base和height。這因?yàn)槿切蔚倪厰?shù)是已知的，且不想讓開發(fā)者改變它。因此，使用對(duì)象冒充時(shí)，3作為對(duì)象的邊數(shù)被傳給Polygon的構(gòu)造函數(shù)。然后，把base和height的值賦予適當(dāng)?shù)膶傩浴?/p>
在用原型鏈繼承方法后，Triangle將覆蓋getArea()方法，提供為三角形面積定制的計(jì)算。
最后一個(gè)類是Rectangle，它也繼承Polygon。矩形有四條邊，面積是用長(zhǎng)度×寬度計(jì)算的，長(zhǎng)度和寬度即成為該類必需的屬性。在前面的UML圖中，要把Rectangle類填充在Triangle類的旁邊，因?yàn)樗鼈兊某惗际荘olygon（如圖4-6所示）。
注意，Rectangle構(gòu)造函數(shù)不把sides作為參數(shù)，同樣的，常量4被直接傳給Polygon構(gòu)造函數(shù)。與Triangle相似，Rectangle引入了兩個(gè)新的作為構(gòu)造函數(shù)的參數(shù)的屬性，然后覆蓋getArea()方法。
3. 測(cè)試代碼
可以運(yùn)行下面代碼來(lái)測(cè)試為該示例創(chuàng)建的代碼：
這段代碼創(chuàng)建一個(gè)三角形，底為12，高為4，還創(chuàng)建一個(gè)矩形，長(zhǎng)為22，寬為10。然后輸出每種形狀的邊數(shù)及面積，證明sides屬性的賦值正確，getArea()方法返回正確的值。三角形的面積應(yīng)為24，矩形的面積應(yīng)該是220。
4. 采用動(dòng)態(tài)原型方法如何？
前面的例子用對(duì)象定義的混合構(gòu)造函數(shù)/原型方式展示繼承機(jī)制，那么可以使用動(dòng)態(tài)原型來(lái)實(shí)現(xiàn)繼承機(jī)制嗎？不能。
繼承機(jī)制不能采用動(dòng)態(tài)化的原因是，prototype對(duì)象的獨(dú)特本性。看下面代碼（這段代碼不正確，卻值得研究）：
上面的代碼展示了用動(dòng)態(tài)原型定義的Polygon和Triangle類。錯(cuò)誤在于突出顯示的設(shè)置Triangle.prototype屬性的代碼。從邏輯上講，這個(gè)位置是正確的，但從功能上講，卻是無(wú)效的。從技術(shù)上說(shuō)來(lái)，在代碼運(yùn)行前，對(duì)象已被實(shí)例化，并與原始的prototype對(duì)象聯(lián)系在一起了。雖然用極晚綁定可使對(duì)原型對(duì)象的修改正確地反映出來(lái)，但替換prototype對(duì)象卻不會(huì)對(duì)該對(duì)象產(chǎn)生任何影響。只有未來(lái)的對(duì)象實(shí)例才會(huì)反映出這種改變，這就使第一個(gè)實(shí)例變得不正確。
要正確使用動(dòng)態(tài)原型實(shí)現(xiàn)繼承機(jī)制，必須在構(gòu)造函數(shù)外賦予新的prototype對(duì)象，如下所示：
這段代碼有效，因?yàn)槭窃谌魏螌?duì)象實(shí)例化前給prototype對(duì)象賦值的。遺憾的是，這意味著不能把這段代碼完整的封裝在構(gòu)造函數(shù)中了，而這正是動(dòng)態(tài)原型的主旨。
【Javascript 繼承實(shí)現(xiàn)例子參考】相關(guān)文章：
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)刷新代碼段08-07
常用排序算法之JavaScript實(shí)現(xiàn)代碼段06-04
JavaScript 小型打飛機(jī)游戲?qū)崿F(xiàn)和原理說(shuō)明08-18
有關(guān)javascript實(shí)現(xiàn)的多個(gè)層切換效果通用函數(shù)示例10-07
關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼-javascript編程06-07
JavaScript類定義原型方法的兩種實(shí)現(xiàn)的區(qū)別07-11
對(duì)javascript的理解08-08
關(guān)于ASP.NET使用JavaScript顯示信息提示窗口實(shí)現(xiàn)原理及代碼05-09
常用的JavaScript模式09-22