徹底理解js面向對象之繼承

1、徹底理解js面向對象之繼承說道這個繼承，了解j的朋友都知道，大多語言都有兩種，一種是接口繼承（只繼承方法簽名）；一種是實現(xiàn)繼承（繼承實際的方法）奈何js中沒有簽名，因而只有實現(xiàn)繼承，而且靠的是原型鏈實現(xiàn)的。下面正式的說一jS中繼承那點事兒1、原型鏈原型鏈：實現(xiàn)繼承的主要方法，利用原型讓一個引用類型繼承另一個引用類型的屬性和方法?；仡櫍簶嬙旌瘮?shù)，原型，實例三者的關系每一個構造函數(shù)都有一個原型對象sp原型對象都包含指向構造函數(shù)的指針S;每個實例都包含指向原型對象的指針看不見的指針原型鏈是怎么來的呢？某個構造函數(shù)的原型對象是另一個構造函數(shù)的實例；這個構造函數(shù)的原型對象就會有看不見的指針指向另一個構造

2、函數(shù)的原型對象；那么另一個原型對象又是其他的構造函數(shù)實例又會怎么樣，就這樣層層遞進，形成原型鏈；來具體看一下吧第一個構造函數(shù)有一個屬性和一個原型方法perty=true;第二個構造函數(shù)目前有一個屬性繼承了/原型成了的實例實際就是重寫的原型對象給原型對象繼承了現(xiàn)在這個構造函數(shù)有兩個屬性一個本身的S一個繼承的存在原型對象的兩個方法一個原型對象的一個原型對象的原型對象的創(chuàng)建第二個構造函數(shù)的實例原型對象的原型對象顯然是存在的注意：iS的S現(xiàn)在指向的是這個構造函數(shù)；因為原來的被重寫了，其內部的S也就隨著；至于原型搜索機制是怎么樣運行的，請仔細看上面的代碼，相信你是可以的先查找S這個實例有沒有此方法顯然沒

3、有，再查找原型對象有沒有此方法也沒有，再查找1.完1整的原型的原型對象的S指向構造函數(shù)在原型那節(jié)已經(jīng)提了些，還是再說一下。完整的原型包括j。所有函數(shù)的默認原型都是j的實例；每個默認原型都有個指針指向j因此自定義類型都繼承如的方法而j的指針指向來結束原型鏈。以S勾造函數(shù)為例，看看完整的原型鏈圖1.2原型和實例的關系判斷第一種使用instanceof操作符：測試實例和原型鏈中出現(xiàn)的構造函數(shù)，結果為true第二種使用isPrototypeOf()方法：只要是原型鏈中出現(xiàn)過的原型，都可以說是該原型鏈所派生的實例的原型console.1og(instanceinstanceofObject)/者8為tr

4、ueconsole.1og(instaneeinstanceofSuperType)console.1og(instaneeinstanceofSubType)console.1og(Ototype.isPrototypeOf(instanee)/都為trueconsole.1og(SuperTtotype.isPrototypeOf(instanee)console.1og(SubTtotype.isPrototypeOf(instanee)1.3謹慎定義方法注意：給原型對象添加方法，一定放在替換原型的后面，因為放在替換原型之前是找不到了，原型會被重寫的;注意：在通過原型鏈繼承時，不能使用對

5、象字面量創(chuàng)建原型方法，因為也會重寫原型鏈；functionSuperType（）perty=true;DDDDSuperTtotype.getSuperValue=function（）pertyDDDDfunctionSubType（）this.subproperty=falseDDDD繼/承/SuperTypeSubTtotype=newSuperType（）DDDD?？谑褂米置媪刻砑有路椒▽е律弦恍袩o效口因為現(xiàn)在的原型替換了bjec實例而非superType的實例，關系中斷叮叮subTtotype=DDDDDDQgeDSubvaiue：funcDion（）叮叮叮口叮叮return叮his.

6、subproperty;DDDDDDDQDDDDDDDsomoDherMeDhOd：funcQion（）叮叮?？诙６eturn口falseDDDDDDQQDDQ；DDDDvarDinsDance=newQSubType（）叮叮consoie.iog（instance.getsupervaiue（）叮/error1.4原型鏈的問題1、包含引用類型值的原型：當實例是另一函數(shù)的原型時，引用類型值就會變成原型上的屬性，就會被另一函數(shù)的實例所共享。叮叮function口superType（）DDDDDDDDhiSDcoiors=yeiiowDredQoiiveQDDQ叮叮function口subTyp

7、e（）QDDQ叮叮subTtotype=newusuperType（實際上就是原型上的了DDDDvarDinstanceD=newQsubType（）叮叮instancei.coiors.push（purpie）DDDDvarDinstance2=newQsubType（）叮叮consoie.iog（instancei.coiors=instance2.coiors）叮/true2、創(chuàng)建子類型實例時，不能向超類型的構造函數(shù)傳遞參數(shù)（沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數(shù)傳遞參數(shù)）2、借助構造函數(shù)為了解決原型中包含引用類型值帶來的問題，利用構造函數(shù)來解決在子類型構造函數(shù)的內部調

8、用超類型構造函數(shù)（函數(shù)是特定環(huán)境中執(zhí)行代碼的對象,P可以或通過l用）叮叮function口superType（）DDDDDDDDthiSDcoior=yeiiowDredQoiiveQDDQ叮叮function口subType（）叮?？谥共[承了superTypeDDDDDDDDsuperTypeQcaii（this）QDDQDDDDvarDinstanceD=newQsubType（）叮叮instancei.coior.push（purpie）DDDDvarDinstance2=newQsubType（）叮叮consoie.iog（instancei.coior）叮/yeiiow,red,oi

9、ive,purpieDDDDconsoieDiog（instance2Dcoior）DD/yeiiowDredQoiive口叮傳遞參數(shù)叮叮function口superType（name）DDDDDDDthiSQname=nameQDDQ叮叮function口subType（）DDDDDDDDsuperTypeDcaii（thiSQdoubie）DDDDDDDDthiSDage=Q2QDDQDDDDvarDinstanceD=newQsubType（）叮叮consoie.iog（）叮/double叮叮consoie.iog（instancei.age）叮/12問題：僅僅借鑒構造函數(shù)，那么避免不了

10、構造函數(shù)的問題，方法都在構造函數(shù)定義了，函數(shù)無法復用3、組合繼承（常用的還是組合，和原型與構造結合一樣）DDDDfunctionQsuperType（name）DDDDDDDDthiSQname=name;DDDDDDDDthiSDcoior=yeiiowDredQoiive；QDDQ叮叮superTtotype.sayName=function（）叮叮叮叮consoie.iog（）;叮叮D叮叮function叮ubType（name,age）叮叮口繼承屬性創(chuàng)建屬性副本superType.call（this,name）;this.age=age;DDDD?？诶^承屬性和方法只是原型中屬性被后來的

11、函數(shù)調用生成的屬性副本遮蓋subTtotype=newsuperType（）;叮叮aiert（subTtotype.constr指向的是superType叮叮subTtotype.constructor=sub將皿irntruct回歸到subType構造函數(shù)身上叮叮subTtotype.sayAge=function（）叮叮叮叮consoie.iog（this.age）DDQQDDDDDDDDvarinstance1=newSubType(double,23)instance1.color.push(pink)console.log(instance1.color)/yellow,red,ol

12、ive,pinkinstance1.sayName()/doubleinstance1.sayAge()/23varinstance2=newSubType(single,34)console.log(instance2.color)/yellow,red,oliveinstance2.sayName()/singleinstance2.sayAge()/34還有其他的繼承，花點時間寫一下1、原型式繼承克羅克福德寫的；借助原型可以基于已有的對象創(chuàng)建新對象，同時不必創(chuàng)建自定義類型functionobject(o)/本質上object(函數(shù)對其中對象的淺復制functionF()/創(chuàng)建一個新的構造

13、函數(shù)F.prototype=o/構造函數(shù)原型為傳入的對象returnnewF()/返回構造函數(shù)的實例varperson=name:double,friends:tom,jack,mikevarperson1=object(person)/事實上為原型共享=greyperson1.friends.push(single)console.log(person1.friends)/tom,jack,mike,singlevarperson2=object(person)=redconsole.log(person2.friends)/tom,jack,mike,singleES5為了規(guī)范原型式的繼承

14、，有個Object.create(來方便，IE9以上可以；只是想一個對象和另一個對象保持類似的情況，完全可以這種方法varperson=name:double,friends:tom,jack,mikevarperson1=Object.create(person)=singleperson1.friends.push(singles)varperson2=Object.create(person)console.log(person1.friends=person2.friends)/trueObject.create()接受兩個參數(shù)，一個為作為新對象原型的對象，一個為新對象定義額外屬性對象

15、varperson=name:double,friends:tom,jack,mikevarperson1=Object.create(person,name:value:single海個屬性都是通過自己描述符定義的)2、寄生式繼承思路和原型式繼承一脈相承，創(chuàng)建一個用于封裝繼承過程的函數(shù)，內部通過方式增強對象，返回對象；主要考慮對象時使用functionobject(o)functionF()F.prototype=oreturnnewF()functioncreatePerson(original)varclone=object(original)/繼承原型clone.sayName=fun

16、ction()alert(name)returnclonevarperson=name:double,friends:single,tom,jackvarperson1=createPerson(person)person1.sayName()/name引用類型值還是共享的3、寄生組合繼承組合繼承是繼承中常常用到的，但是會調用兩次超類型構造函數(shù)；寄生組合繼承就是為了解決這個問題的functionobject(o)functionF()F.prototype=oreturnnewF()functioninheritPrototype(subType,superType)varprototype=object(superType)創(chuàng)建對象(superType實例)prototype.constructor=subType/增強對象subTtotype=prototype/指定對象(原型賦予實例)functionSuperType(name,sex)=namethis.sex=sexthis.colors=redSuperTtotype.sayName=function()alert()functionSubType(name,sex,age)SuperType.call(this,name,sex)this.age=ageinheritPrototype(SubT