[轉]Javascript中幾種較為流行的繼承方式

標籤：原型   子類   資料   利用   turn   網頁   串連   弱類型   覆蓋   

出處：http://www.jianshu.com/p/a6c005228a75

開篇

從‘嚴格‘意義上說，javascript並不是一門真正的物件導向語言。這種說法原因一般都是覺得javascript作為一門弱類型語言與類似java或c#之類的強型語言的繼承方式有很大的區別，因而預設它就是非主流的物件導向方式，甚至竟有很多書將其描述為‘非完全物件導向‘語言。其實個人覺得，什麼方式並不重要，重要的是否具有物件導向的思想，說javascript不是物件導向語言的，往往都可能沒有深入研究過javascript的繼承方式，故特撰此文以供交流。

為何需要利用javascript實現繼承

早期pc機器的效能確實不敢恭維，所有的壓力全在伺服器端，用戶端瀏覽器純屬擺設。再加上那時流行的table布局以及電話線的上網方式導致瀏覽一個網頁十分的卡；而今互連網時代飛速發展，個人電腦硬體得到了極大提升，用戶端瀏覽器的效能也十分的酸爽，web開發的模式也在悄悄改變：服務端不再像以前那樣“辛苦”，取而代之的是儘可能的讓瀏覽器承擔更多的任務，如此一來，壓力分攤到每個用戶端上，企業不但節省成本，隨之也讓web前端開發變的更加有趣－－越來越多的前端架構層出不窮，甚至出現了前端的MVC模型。在這種背景下，javascript的角色已經絕對不是只做一些簡單的驗證，發送一些請求或者操作一些DOM，更多的需要擔任類似於路由層和業務層的角色。相反，javascript需要做大量的邏輯性任務，這裡面就包括前台資料的抽離（即model），而只有運用物件導向的思維才能很好的對抽離資料進行處理，因此繼承就在這裡顯得舉足輕重。

從一個簡單的需求開始

現從前台抽離一個model名為Person，其有基本屬性name和age，預設每個人都會說話，因此將說話的功能say放在了原型對象上，以供每個執行個體享用。現在對於Man來說，它需要繼承Person的基本屬性，並且在此基礎上添加自己特有的屬性。

function Person (name, age) {    this.name = name;    this.age = age;}Person.prototype.say = function(){    console.log(‘hello, my name is ‘ + this.name);};function Man() {    //my own properties}

　　

下面介紹幾種主流的繼承方式。1.原型鏈繼承

function Person (name, age) {    this.name = name;    this.age = age;}Person.prototype.say = function(){    console.log(‘hello, my name is ‘ + this.name);};function Man() {}Man.prototype = new Person(‘pursue‘);var man1 = new Man();man1.say(); //hello, my name is pursuevar man2 = new Man();console.log(man1.say === man2.say);//trueconsole.log(man1.name === man2.name);//true

　　

這種繼承方式很直接，為了擷取Person的所有屬性方法(執行個體上的和原型上的)，直接將父類的執行個體new Person(‘pursue‘)賦給了子類的原型，其實子類的執行個體man1,man2本身是一個完全空的對象，所有的屬性和方法都得去原型鏈上去找，因而找到的屬性方法都是同一個。
所以直接利用原型鏈繼承是不現實的。

2.利用建構函式繼承

function Person (name, age) {    this.name = name;    this.age = age;}Person.prototype.say = function(){    console.log(‘hello, my name is ‘ + this.name);};function Man(name, age) {    Person.apply(this, arguments);}//Man.prototype = new Person(‘pursue‘);var man1 = new Man(‘joe‘);var man2 = new Man(‘david‘);console.log(man1.name === man2.name);//falseman1.say(); //say is not a function

　　

這裡子類的在建構函式裡利用了apply去調用父類的建構函式，從而達到繼承父類屬性的效果，比直接利用原型鏈要好的多，至少每個執行個體都有自己那一份資源，但是這種辦法只能繼承父類的執行個體屬性，因而找不到say方法，為了繼承父類所有的屬性和方法，則就要修改原型鏈，從而引入了組合繼承方式。

3.組合繼承

function Person (name, age) {    this.name = name;    this.age = age;}Person.prototype.say = function(){    console.log(‘hello, my name is ‘ + this.name);};function Man(name, age) {    Person.apply(this, arguments);}Man.prototype = new Person();var man1 = new Man(‘joe‘);var man2 = new Man(‘david‘);console.log(man1.name === man2.name);//falseconsole.log(man1.say === man2.say);//trueman1.say(); //hello, my name is joe

　　

需要注意的是man1和man2的執行個體屬性其實是覆蓋了原型屬性，但是並沒要覆蓋掉原型上的say方法（因為它們沒有），所以這裡man1.say === man2.say依然返回true，因而需要十分小心沒有覆蓋掉的原型屬性，因為它是所有執行個體共有的。

4.寄生組合繼承

說實話我真不知道下面的這種形式叫這名字，但是它確實是最流行，最經典的javascript的繼承方式。
其實，只需要明白原型對象的結構即可：

function Person (name, age) {            this.name = name;            this.age = age;        }Person.prototype.say = function(){    console.log(‘hello, my name is ‘ + this.name);};function Man(name, age) {    Person.apply(this, arguments);}Man.prototype = Object.create(Person.prototype);//a.Man.prototype.constructor = Man;//b.var man1 = new Man(‘pursue‘);var man2 = new Man(‘joe‘);console.log(man1.say == man2.say);console.log(man1.name == man2.name);

　　

其實寄生組合繼承和上面的組合繼承區別僅在於構造子類原型對象的方式上（a.和b.），這裡用到了Object.creat(obj)方法，該方法會對傳入的obj對象進行淺拷貝，類似於：

function create(obj){    function T(){};    T.prototype = obj;    return new T();}

因此，a.會將子類的原型對象與父類的原型對象進行很好的串連，而並不像一般的組合繼承那樣直接對子類的原型進行複製（如Man.prototype = new Person();）,這樣只是很暴力的在對屬性進行覆蓋。而寄生組合繼承方式則對執行個體屬性和原型屬性分別進行了繼承，在實現上更加合理。

注意:代碼b.並不會改變instanceof的結果，但是對於需要用到construcor的情境，這麼做更加嚴謹。

 

 

 

 

 

 

 

-----完-----

[轉]Javascript中幾種較為流行的繼承方式