Javascript 繼承實現例子參考
1. 創建基類
首先考慮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對象賦值的。遺憾的是,這意味着不能把這段代碼完整的封裝在構造函數中了,而這正是動態原型的主旨。
相關文章
-
Javascript簡單實現面向對象編程繼承實例代碼
複製代碼 代碼如下:function Polygon(iSliders){ //定義一個多邊形ers=iSliders;}rea=function(){ //爲多邊形定義一個去的面積的'方法retu 0;}function Triangle(iBase,iHeight){(this,3); //繼承多邊形對象=iBase; -
使用JavaScript實現Java的List功能
複製代碼 代碼如下:/*** js模擬java中的List*/var list = new Array();/*** 添加* @param {Object} object*/function add(object) {list[th] = object;}/*** 移除此列表中指定位置上的元素。* @param index 指定位置 -
JavaScript實現的div拖動效果實例代碼
xx年,在各級領導的關心支持下,在全校教職工的共同努力下,在經費壓縮一半的情況下,學校實現了內涵式發展,我校被評爲全省管理五星級中職學校、全省教育工作先進集體、全省平安校園、市文明單位、市五一勞動獎狀等,現將我一年 -
JavaScript中創建字典對象(dictionary)的實例
對於JavaScript來說,其自身的Array對象僅僅是個數組,無法提供通過關鍵字來獲取保存的數據,jQuery源碼中提供了一種非常好的方式來解決這個問題,先看一下源碼:複製代碼 代碼如下:function createCache() {var keys = [];fun -
javascript的六種繼承方式
1.原型鏈function SuperType(){erty = true;}uperValue = function(){retu erty;};function SubType(){roperty = false;}//繼承了otype = new SuperType();ubValue = function (){retu roperty;};var instance = -
JavaScript快速排序實現實例教程
目前最常見的排序算法大概有七八種,理解和掌握各種排序算法似乎是一個合格的程序員所必須要掌握的。今天想要和大家分享快速排序算法的Javascript的實現。快速排序(Quicksort),又稱爲 劃分交換排序(partition-exchange -
JavaScript中push(),join() 函數實例詳解
定義和用法push方法 可向數組的末尾添加一個或多個元素,並返回一個新的.長度。join方法 用於把數組中所有元素添加到一個指定的字符串,元素是通過指定的分隔符進行分割的。語法(newelement1,newelement2,....,newelemen -
JavaScript如何實現JSON.stringify
導語:JavaScript如何實現JSON.stringify呢?通過下面教程大家會有所收穫,更多詳情請關注應屆畢業生考試網。JSON.stringify是瀏覽器高版本帶的一個將JS的Objtect對象轉換爲JSON字符串的一個方法,不過再IE6下面,並不存在JSO -
關於JavaScript中繼承的深入理解
JavaScript中我們可以藉助原型實現繼承。例如function baz(){="";}function foo(){}otype=new baz();var myFoo=new foo();;這樣我們就可以訪問到baz裏的屬性oo啦。在實際使用中這個樣不行滴,由於原型的共享特點(數據保 -
用 Javascript 實現錨點(Anchor)間平滑跳轉
複製代碼 代碼如下:<script type="text/javascript">// 說明:用 Javascript 獲取滾動條位置等信息// 來源 :ThickBox 2.1function getScroll(){var t, l, w, h;if (mentElement && llTop) {t = llTop;l = llLef