- 相關(guān)推薦
深入理解Javascript的繼承和原型鏈
在上一篇文章中，介紹了原型的概念，了解到在javascript中構(gòu)造函數(shù)、原型對(duì)象、實(shí)例三個(gè)好基友之間的關(guān)系：每一個(gè)構(gòu)造函數(shù)都有一個(gè)“守護(hù)神”——原型對(duì)象，原型對(duì)象心里面也存著一個(gè)構(gòu)造函數(shù)的“位置”，兩情相悅，而實(shí)例呢卻又“暗戀”著原型對(duì)象，她也在心里留存了一個(gè)原型對(duì)象的位置。
javascript本身不是面向?qū)ο蟮恼Z(yǔ)言，而是基于對(duì)象的語(yǔ)言，對(duì)于習(xí)慣了其他OO語(yǔ)言的人來(lái)說(shuō)，起初有些不適應(yīng)，因?yàn)樵谶@里沒(méi)有“類(lèi)”的概念，或者說(shuō)“類(lèi)”和“實(shí)例”不區(qū)分，更不要指望有“父類(lèi)”、“子類(lèi)”之分了。那么，javascript中這一堆對(duì)象這么聯(lián)系起來(lái)呢？
幸運(yùn)的是，javascript在設(shè)計(jì)之初就提供了“繼承”的實(shí)現(xiàn)方式，在認(rèn)識(shí)“繼承”之前，我們現(xiàn)在先來(lái)了解下原型鏈的概念。
原型鏈
我們知道原型都有一個(gè)指向構(gòu)造函數(shù)的指針，假如我們讓SubClass原型對(duì)象等于另一個(gè)類(lèi)型的實(shí)例new SuperClass()會(huì)怎么樣？此時(shí)，SubClass原型對(duì)象包含一個(gè)指向SuperClass原型的指針，SuperClass原型中也包含一個(gè)指向SuperClass構(gòu)造函數(shù)的指針。。。這樣層層遞進(jìn)下去，就形成了一個(gè)原型鏈。
具體代碼如下：
function SuperClass(){ this.name = "women" } SuperClass.prototype.sayWhat = function(){ return this.name + ":i`m a girl!"; } function SubClass(){ this.subname = "your sister"; } SubClass.prototype = new SuperClass(); SubClass.prototype.subSayWhat = function(){ return this.subname + ":i`m a beautiful girl"; } var sub = new SubClass(); console.log(sub.sayWhat());//women:i`m a girl!
使用原型鏈實(shí)現(xiàn)繼承
通過(guò)上面的代碼中可以看出SubClass繼承了SuperClass的屬性和方法，這個(gè)繼承的實(shí)現(xiàn)是通過(guò)將SuperClass的實(shí)例賦值給SubClass的原型對(duì)象，這樣SubClass的原型對(duì)象就被SuperClass的一個(gè)實(shí)例覆蓋掉了，擁有了它的全部屬性和方法，同時(shí)還擁有一個(gè)指向SuperClass原型對(duì)象的指針。
在使用原型鏈實(shí)現(xiàn)繼承時(shí)有一些需要我們注意的地方：
注意繼承后constructor的變化。此處sub的constructor指向的是SuperClass，因?yàn)镾ubClass的原型指向了SuperClass的原型。在了解原型鏈時(shí)，不要忽略掉在末端還有默認(rèn)的Object對(duì)象，這也是我們能在所有對(duì)象中使用toString等對(duì)象內(nèi)置方法的原因。
通過(guò)原型鏈實(shí)現(xiàn)繼承時(shí)，不能使用字面量定義原型方法，因?yàn)檫@樣會(huì)重寫(xiě)原型對(duì)象（在上一篇文章中也介紹過(guò)）：
function SuperClass(){ this.name = "women" } SuperClass.prototype.sayWhat = function(){ return this.name + ":i`m a girl!"; } function SubClass(){ this.subname = "your sister"; } SubClass.prototype = new SuperClass(); SubClass.prototype = {//此處原型對(duì)象被覆蓋，因?yàn)闊o(wú)法繼承SuperClass屬性和方法 subSayWhat:function(){ return this.subname + ":i`m a beautiful girl"; } } var sub = new SubClass(); console.log(sub.sayWhat());//TypeError: undefined is not a function
實(shí)例共享的問(wèn)題。在前面講解原型和構(gòu)造函數(shù)時(shí)，我們?cè)?jīng)介紹過(guò)包含引用類(lèi)型屬性的原型會(huì)被所有的實(shí)例共享，同樣，我們繼承而來(lái)的原型中也會(huì)共享“父類(lèi)”原型中引用類(lèi)型的屬性，當(dāng)我們通過(guò)原型繼承修改了“父類(lèi)”的引用類(lèi)型屬性后，其他所有繼承自該原型的實(shí)例都會(huì)受到影響，這不僅浪費(fèi)了資源，也是我們不愿看到的現(xiàn)象：
function SuperClass(){ this.name = "women"; this.bra = ["a","b"]; } function SubClass(){ this.subname = "your sister"; } SubClass.prototype = new SuperClass(); var sub1 = new SubClass(); sub1.name = "man"; sub1.bra.push("c"); console.log(sub1.name);//man console.log(sub1.bra);//["a","b","c"] var sub2 = new SubClass(); console.log(sub1.name);//woman console.log(sub2.bra);//["a","b","c"]
注意：此處在數(shù)組中添加一個(gè)元素，所有繼承自SuperClass的實(shí)例都會(huì)受到影響，但是如果修改name屬性則不會(huì)影響到其他的實(shí)例，這是因?yàn)閿?shù)組為引用類(lèi)型，而name為基本類(lèi)型。
如何解決實(shí)例共享的問(wèn)題呢？我們接著往下看...
經(jīng)典繼承（constructor stealing）
正如我們介紹過(guò)很少單獨(dú)使用原型定義對(duì)象一樣，在實(shí)際開(kāi)發(fā)中我們也很少單獨(dú)使用原型鏈，為了解決引用類(lèi)型的共享問(wèn)題，javascript開(kāi)發(fā)者們引入了經(jīng)典繼承的模式（也有人稱(chēng)為借用構(gòu)造函數(shù)繼承），它的實(shí)現(xiàn)很簡(jiǎn)單就是在子類(lèi)型構(gòu)造函數(shù)中調(diào)用超類(lèi)型的構(gòu)造函數(shù)。我們需要借助javascript提供的call()或者apply()函數(shù)，我們看下示例：
function SuperClass() { this.name = "women"; this.bra = ["a", "b"];}function SubClass() { this.subname = "your sister"; //將SuperClass的作用域賦予當(dāng)前構(gòu)造函數(shù)，實(shí)現(xiàn)繼承 SuperClass.call(this);}var sub1 = new SubClass();sub1.bra.push("c");console.log(sub1.bra);//["a","b","c"]var sub2 = new SubClass();console.log(sub2.bra);//["a","b"]
SuperClass.call(this);這一句話(huà)的意思是在SubClass的實(shí)例（上下文）環(huán)境中調(diào)用了SuperClass構(gòu)造函數(shù)的初始化工作，這樣每一個(gè)實(shí)例就會(huì)有自己的一份bra屬性的副本了，互不產(chǎn)生影響了。
但是，這樣的實(shí)現(xiàn)方式仍不是完美的，既然引入了構(gòu)造函數(shù)，那么同樣我們也面臨著上篇中講到的構(gòu)造函數(shù)存在的問(wèn)題：如果在構(gòu)造函數(shù)中有方法的定義，那么對(duì)于沒(méi)一個(gè)實(shí)例都存在一份單獨(dú)的Function引用，我們的目的其實(shí)是想共用這個(gè)方法，而且我們?cè)诔?lèi)型原型中定義的方法，在子類(lèi)型實(shí)例中是無(wú)法調(diào)用到的：
function SuperClass() { this.name = "women"; this.bra = ["a", "b"]; } SuperClass.prototype.sayWhat = function(){ console.log("hello"); } function SubClass() { this.subname = "your sister"; SuperClass.call(this); } var sub1 = new SubClass(); console.log(sub1.sayWhat());//TypeError: undefined is not a function
如果你看過(guò)上篇文章關(guān)于原型對(duì)象和構(gòu)造函數(shù)的，想必你已經(jīng)知道解決這個(gè)問(wèn)題的答案了，那就是沿用上篇的套路，使用“組合拳”！
組合式繼承
組合式繼承就是結(jié)合原型鏈和構(gòu)造函數(shù)的優(yōu)勢(shì)，發(fā)出各自特長(zhǎng)，組合起來(lái)實(shí)現(xiàn)繼承的一種方式，簡(jiǎn)單來(lái)說(shuō)就是使用原型鏈繼承屬性和方法，使用借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)實(shí)例屬性的繼承，這樣既解決了實(shí)例屬性共享的問(wèn)題，也讓超類(lèi)型的屬性和方法得到繼承：
function SuperClass() { this.name = "women"; this.bra = ["a", "b"]; } SuperClass.prototype.sayWhat = function(){ console.log("hello"); } function SubClass() { this.subname = "your sister"; SuperClass.call(this); //第二次調(diào)用SuperClass } SubClass.prototype = new SuperClass(); //第一次調(diào)用SuperClass var sub1 = new SubClass(); console.log(sub1.sayWhat());//hello
組合繼承的方式也是實(shí)際開(kāi)發(fā)中我們最常用的實(shí)現(xiàn)繼承的方式，到此已經(jīng)可以滿(mǎn)足你實(shí)際開(kāi)發(fā)的需求了，但是人對(duì)完美的追求是無(wú)止境的，那么，必然會(huì)有人對(duì)這個(gè)模式“吹毛求疵”了：你這個(gè)模式調(diào)用了兩次超類(lèi)型的構(gòu)造函數(shù)耶！兩次耶。。。你造嗎，這放大一百倍是多大的性能損失嗎？
最有力的反駁莫過(guò)于拿出解決方案，好在開(kāi)發(fā)者找到了解決這個(gè)問(wèn)題的最優(yōu)方案：
寄生組合式繼承
在介紹這個(gè)繼承方式前，我們先了解下寄生構(gòu)造函數(shù)的概念，寄生構(gòu)造函數(shù)類(lèi)似于前面提到的工廠模式，它的思想是定義一個(gè)公共函數(shù)，這個(gè)函數(shù)專(zhuān)門(mén)用來(lái)處理對(duì)象的創(chuàng)建，創(chuàng)建完成后返回這個(gè)對(duì)象，這個(gè)函數(shù)很像構(gòu)造函數(shù)，但構(gòu)造函數(shù)是沒(méi)有返回值的：
function Gf(name,bra){ var obj = new Object(); obj.name = name; obj.bra = bra; obj.sayWhat = function(){ console.log(this.name); } return obj;}var gf1 = new Gf("bingbing","c++");console.log(gf1.sayWhat());//bingbing
寄生式繼承的實(shí)現(xiàn)和寄生式構(gòu)造函數(shù)類(lèi)似，創(chuàng)建一個(gè)不依賴(lài)于具體類(lèi)型的“工廠”函數(shù)，專(zhuān)門(mén)來(lái)處理對(duì)象的繼承過(guò)程，然后返回繼承后的對(duì)象實(shí)例，幸運(yùn)的是這個(gè)不需要我們自己實(shí)現(xiàn)，道哥（道格拉斯）早已為我們提供了一種實(shí)現(xiàn)方式：
function object(obj) { function F() {} F.prototype = obj; return new F();}var superClass = { name:"bingbing", bra:"c++"}var subClass = object(superClass);console.log(subClass.name);//bingbing
在公共函數(shù)中提供了一個(gè)簡(jiǎn)單的構(gòu)造函數(shù)，然后將傳進(jìn)來(lái)對(duì)象的實(shí)例賦予構(gòu)造函數(shù)的原型對(duì)象，最后返回該構(gòu)造函數(shù)的實(shí)例，很簡(jiǎn)單，但療效很好，不是嗎？這個(gè)方式被后人稱(chēng)為“原型式繼承”，而寄生式繼承正是在原型式基礎(chǔ)上，通過(guò)增強(qiáng)對(duì)象的自定義屬性實(shí)現(xiàn)的：
function buildObj(obj){ var o = object(obj); o.sayWhat = function(){ console.log("hello"); } return o;}var superClass = { name:"bingbing", bra:"c++"}var gf = buildObj(superClass);gf.sayWhat();//hello
寄生式繼承方式同樣面臨著原型中函數(shù)復(fù)用的問(wèn)題，于是，人們又開(kāi)始拼起了積木，誕生了——寄生組合式繼承，目的是解決在指定子類(lèi)型原型時(shí)調(diào)用父類(lèi)型構(gòu)造函數(shù)的問(wèn)題，同時(shí)，達(dá)到函數(shù)的最大化復(fù)用。基于以上基礎(chǔ)實(shí)現(xiàn)方式如下：
//參數(shù)為兩個(gè)構(gòu)造函數(shù)function inheritObj(sub,sup){ //實(shí)現(xiàn)實(shí)例繼承，獲取超類(lèi)型的一個(gè)副本 var proto = object(sup.prototype); //重新指定proto實(shí)例的constructor屬性 proto.constructor = sub; //將創(chuàng)建的對(duì)象賦值給子類(lèi)型的原型 sub.prototype = proto;}function SuperClass() { this.name = "women"; this.bra = ["a", "b"];}SuperClass.prototype.sayWhat = function() { console.log("hello");}function SubClass() { this.subname = "your sister"; SuperClass.call(this);}inheritObj(SubClass,SuperClass);var sub1 = new SubClass();console.log(sub1.sayWhat()); //hello
這個(gè)實(shí)現(xiàn)方式避免了超類(lèi)型的兩次調(diào)用，而且也省掉了SubClass.prototype上不必要的屬性，同時(shí)還保持了原型鏈，到此真正的結(jié)束了繼承之旅，這個(gè)實(shí)現(xiàn)方式也成為了最理想的繼承實(shí)現(xiàn)方式！人們對(duì)于javascript的繼承的爭(zhēng)議還在繼續(xù)，有人提倡OO，有人反對(duì)在javascript做多余的努力去實(shí)現(xiàn)OO的特性，管他呢，至少又深入了解了些！
【深入理解Javascript的繼承和原型鏈】相關(guān)文章：
理解JavaScript原型鏈教程09-02
有關(guān)深入理解JavaScript中的并行處理的介紹10-14
對(duì)javascript的理解08-08
javascript的閉包概念怎么理解06-15
JavaScript類(lèi)定義原型方法的兩種實(shí)現(xiàn)的區(qū)別07-11
javascript面向?qū)ο笾械膶?duì)象怎么理解09-02
淺談javascript中的單線(xiàn)程理解08-16
淺談如何深入學(xué)習(xí)Javascript中的this關(guān)鍵字08-19