javascript類式繼承設計模式簡單介紹
一般說來,我們在設計類的時候,實際上就是希望能減少重複性的程式碼,使用繼承可以完美的做到這一點,藉助繼承機制,你可以在現有類的基礎上再次進行設計並且充分利用它們已經具備的各種方法,而對設計的修改也更為輕鬆。舉例說明:
[JavaScript] 純文字檢視 複製程式碼function Person(name){ this.name = name; } Person.prototype.getname = function(){ return this.name; } function Bloger(name,blog){ Person.call(this,name); this.blog = blog; } var bloger = new Bloger("antzone","http://www.softwhy.com"); console.log(bloger.name=="antzone"); console.log(bloger.blog) console.log(bloger.getname()=="antzone");
通過上例可以看到,Bloger在其內部通過call動態呼叫了其父類Person的原生屬性和方法,即可以理解為Bloger繼承了Person,成為它的一個子類,但是細心的同學會發現,Person原型物件中的方法,僅僅依靠call,是不能繼承過來的,這也就是會提示"bloger.getname is not a function"的原因所在了。不過不用擔心,對上述程式碼稍作處理,即可解決這個問題:
[JavaScript] 純文字檢視 複製程式碼function Person(name){ this.name = name; } Person.prototype.getname = function(){ return this.name; } function Bloger(name,blog){ Person.call(this,name); this.blog = blog; } /*請注意以下兩行程式碼*/ Bloger.prototype = new Person(); Bloger.prototype.constructor = Bloger; var bloger = new Bloger("antzone","http://www.softwhy.com"); console.log(bloger.name=="antzone"); console.log(bloger.blog) console.log(bloger.getname()=="antzone");
在這裡需要對這兩行程式碼解釋一下,我們知道,每一個建構函式都有一個prototype屬性,這個屬性指向該建構函式的原型物件,其實原型物件也是例項物件,只不過在原型物件中定義的屬性和方法可以提供給所有的例項物件共享,由此可以得出,新新增兩行程式碼的意圖就是設定子類的原型物件指向父類的一個例項化物件,而父類的例項化物件會把父類的原型屬性方法統統繼承過來,這樣也就達到了我們的目的,子類的原型繼承了所有父類例項物件具有的屬性和方法。
但是還應該注意Bloger.prototype.constructor = Bloger;這行程式碼,因為把子類的prototype設定為父類的例項時,其constructor屬性會指向父類,所以要設定子類原型的constructor重新指向子類,至此,已經完美實現了javascript的類式繼承。
為了簡化子類的宣告,可以把擴充套件子類的整個過程寫名為extend的函式中,作用就是基於一個給定的類結構去建立一個新的類:
[JavaScript] 純文字檢視 複製程式碼function extend(childClass,parentClass){ var F = new Function(); F.prototype = parentClass.prototype; childClass.prototype = new F(); childClass.prototype.constructor = childClass; }
有了這個extend這個函式,就可以很方便的擴充套件子類了,只需呼叫這個函式即可,上述新增的兩行程式碼可改為extend(Bloger,Person), 一樣可以實現完全繼承。
相關文章
- javascript建構函式的繼承簡單介紹JavaScript函式繼承
- javascript非建構函式繼承簡單介紹JavaScript函式繼承
- javascript物件導向繼承簡單介紹JavaScript物件繼承
- javascript實現繼承方式簡單介紹JavaScript繼承
- javascript設計模式單例模式簡單介紹JavaScript設計模式單例
- 設計模式和反模式簡單介紹設計模式
- 簡單的JavaScript繼承(譯)JavaScript繼承
- javascript繼承的實現方式介紹JavaScript繼承
- javascript類繼承JavaScript繼承
- JavaScript 模組化程式設計簡單介紹JavaScript程式設計
- javascript鏈式呼叫簡單介紹JavaScript
- javascript匿名函式簡單介紹JavaScript函式
- javascript call()函式用法簡單介紹JavaScript函式
- javascript trim()函式用法簡單介紹JavaScript函式
- javascript高階函式簡單介紹JavaScript函式
- javascript函式呼叫方式簡單介紹JavaScript函式
- JS原型繼承和類式繼承JS原型繼承
- JavaScript 簡單介紹JavaScript
- javascript物件導向程式設計概念簡單介紹JavaScript物件程式設計
- javascript函數語言程式設計簡單介紹JavaScript函數程式設計
- javascript如何實現模組程式設計簡單介紹JavaScript程式設計
- java設計模式一一設計模式的簡介和介紹Java設計模式
- javascript定時器函式簡單介紹JavaScript定時器函式
- javascript呼叫函式的方式簡單介紹JavaScript函式
- javascript匿名函式的使用簡單介紹JavaScript函式
- javascript實現鏈式呼叫簡單介紹JavaScript
- Javascript繼承2:建立即繼承—-建構函式繼承JavaScript繼承函式
- 簡單介紹克隆 JavaScriptJavaScript
- javascript物件簡單介紹JavaScript物件
- javascript this指向簡單介紹JavaScript
- javascript加密簡單介紹JavaScript加密
- Java 中設計模式 (單例模式) 介紹Java設計模式單例
- javascript匿名函式的優點簡單介紹JavaScript函式
- JavaScript基礎: 類與繼承JavaScript繼承
- javascript物件導向繼承的簡單例項JavaScript物件繼承單例
- 詳細介紹Python類的繼承與多型Python繼承多型
- 征服 JavaScript 面試:類繼承和原型繼承的區別JavaScript面試繼承原型
- Javascript繼承機制的設計思想JavaScript繼承