說道這個繼承，了解object-oriented的朋友都知道，大多oo語言都有兩種，一種是接口繼承（只繼承方法簽名）；一種是實現繼承（繼承實際的方法）
奈何js中沒有簽名，因而只有實現繼承，而且靠的是原型鏈實現的。下面正式的說一說js中繼承那點事兒
原型鏈：實現繼承的主要方法，利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
回顧：構造函數，原型，實例三者的關系
每一個構造函數都有一個原型對象(Person.prototype)；原型對象都包含指向構造函數的指針(constructor)；每個實例都包含指向原型對象的指針(看不見的_proto_指針)
原型鏈是怎么來的呢？
某個構造函數的原型對象是另一個構造函數的實例；這個構造函數的原型對象就會有個(看不見的_proto_指針)指向另一個構造函數的原型對象；
那么另一個原型對象又是其他的構造函數實例又會怎么樣，就這樣層層遞進，形成原型鏈；來具體看一下吧
//第一個構造函數;有一個屬性和一個原型方法 function SuperType(){ this.property=true; } SuperType.prototype.getSuperValue=function(){ return this.property } //第二個構造函數;目前有一個屬性 function SubType(){ this.subproperty=false } //繼承了SuperType;SubType原型成了SuperType的實例;實際就是重寫SubType的原型對象;給SuperType原型對象繼承了 SubType.prototype=new SuperType() //現在這個構造函數有兩個屬性(一個本身的subproperty,一個繼承的存在原型對象的property);兩個方法(一個原型對象的getSubValue,一個原型對象的原型對象的getSuperValue) SubType.prototype.getSubValue=function(){ return this.subproperty } var instance=new SubType() //創建第二個構造函數的實例 console.log(instance.getSuperValue()) //true 先查找instance這個實例有沒有此方法;顯然沒有，再查找SubType原型對象有沒有此方法;也沒有，再查找SubType原型對象的原型對象;顯然是存在的注意：instance的constructor現在指向的是SuperType這個構造函數；因為原來的SubType.prototype被重寫了，其內部的constructor也就隨著SubType.prototype的原型對象的constructor指向構造函數SuperType；至于原型搜索機制是怎么樣運行的，請仔細看上面的代碼，相信你是可以的
1.1完整的原型
在原型那節已經提了些，還是再說一下。完整的原型包括Object。
所有函數的默認原型都是Object的實例；每個默認原型都有個_proto_指針指向Object.prototype；因此自定義類型都繼承如toString，valueOf的方法
而Object.prototype的_proto_指針指向null來結束原型鏈。以Person構造函數為例，看看完整的原型鏈圖
1.2原型和實例的關系判斷
第一種使用instanceof操作符： 測試實例和原型鏈中出現的構造函數，結果為true
第二種使用isPrototypeOf()方法： 只要是原型鏈中出現過的原型，都可以說是該原型鏈所派生的實例的原型
console.log(instance instanceof Object) //都為true console.log(instance instanceof SuperType) console.log(instance instanceof SubType) console.log(Object.prototype.isPrototypeOf(instance)) //都為true console.log(SuperType.prototype.isPrototypeOf(instance)) console.log(SubType.prototype.isPrototypeOf(instance))
1.3謹慎定義方法
注意：給原型對象添加方法，一定放在替換原型的后面，因為放在替換原型之前是找不到了，原型會被重寫的；
注意：在通過原型鏈繼承時，不能使用對象字面量創建原型方法，因為也會重寫原型鏈；
function SuperType(){ this.property=true; } SuperType.prototype.getSuperValue=function(){ return this.property } function SubType(){ this.subproperty=false } //繼承SuperType SubType.prototype=new SuperType() //使用字面量添加新方法,導致上一行無效 因為現在的原型替換了Object實例而非SuperType的實例,關系中斷 SubType.prototype={ getSubValue:function(){ return this.subproperty; }, somOtherMethod:function(){ return false } }; var instance=new SubType() console.log(instance.getSuperValue()) //error1.4原型鏈的問題
1、包含引用類型值的原型：當實例是另一函數的原型時，引用類型值就會變成原型上的屬性，就會被另一函數的實例所共享。
function SuperType(){ this.colors=["yellow","red","olive"] } function SubType(){ } SubType.prototype=new SuperType() //color實際上就是原型上的了 var instance1=new SubType() instance1.colors.push("purple") var instance2=new SubType() console.log(instance1.colors==instance2.colors) //true2、創建子類型實例時，不能向超類型的構造函數傳遞參數（沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數傳遞參數）
為了解決原型中包含引用類型值帶來的問題，利用構造函數來解決
在子類型構造函數的內部調用超類型構造函數（函數是特定環境中執行代碼的對象，可以通過apply或call調用）
function SuperType(){ this.color=["yellow","red","olive"] } function SubType(){ //繼承了SuperType SuperType.call(this) } var instance1=new SubType() instance1.color.push("purple") var instance2=new SubType() console.log(instance1.color) //["yellow","red","olive","purple"] console.log(instance2.color) //["yellow","red","olive"] //傳遞參數 function SuperType(name){ this.name=name } function SubType(){ SuperType.call(this,"double") this.age=12 } var instance1=new SubType() console.log(instance1.name) //double console.log(instance1.age) //12問題：僅僅借鑒構造函數，那么避免不了構造函數的問題，方法都在構造函數定義了，函數無法復用
function SuperType(name){ this.name=name; this.color=["yellow","red","olive"]; } SuperType.prototype.sayName=function(){ console.log(this.name); } function SubType(name,age){ //繼承屬性,創建屬性副本 SuperType.call(this,name); this.age=age; } //繼承屬性和方法,只是原型中屬性被后來的函數調用生成的屬性副本遮蓋 SubType.prototype=new SuperType(); alert(SubType.prototype.constructor) //指向的是SuperType SubType.prototype.constructor=SubType; //將constructor回歸到SubType構造函數身上 SubType.prototype.sayAge=function(){ console.log(this.age) } var instance1=new SubType("double",23) instance1.color.push("pink") console.log(instance1.color) //["yellow","red","olive","pink"] instance1.sayName() //double instance1.sayAge() //23 var instance2=new SubType("single",34) console.log(instance2.color) //["yellow","red","olive"] instance2.sayName() //single instance2.sayAge() //34還有其他的繼承，花點時間寫一下
1、原型式繼承
克羅克福德寫的；借助原型可以基于已有的對象創建新對象，同時不必創建自定義類型
function object(o){ //本質上object()函數對其中對象的淺復制 function F(){} //創建一個新的構造函數 F.prototype=o //構造函數原型為傳入的對象 return new F() //返回構造函數的實例 } var person={ name:"double", friends:["tom","jack","mike"] } var person1=object(person) //事實上為原型共享 person1.name="grey" person1.friends.push("single") console.log(person1.friends) //["tom", "jack", "mike", "single"] var person2=object(person) person2.name="red" console.log(person2.friends) //["tom", "jack", "mike", "single"]ES5為了規范原型式的繼承，有個Object.create()來方便，IE9以上可以；只是想一個對象和另一個對象保持類似的情況，完全可以這種方法
var person={ name:"double", friends:["tom","jack","mike"] } var person1=Object.create(person) person1.name="single" person1.friends.push("singles") var person2=Object.create(person) console.log(person1.friends==person2.friends) //true //Object.create()接受兩個參數，一個為作為新對象原型的對象，一個為新對象定義額外屬性對象 var person={ name:"double", friends:["tom","jack","mike"] } var person1=Object.create(person,{ name:{ value:"single" //每個屬性都是通過自己描述符定義的 } })2、寄生式繼承
思路和原型式繼承一脈相承，創建一個用于封裝繼承過程的函數，內部通過方式增強對象，返回對象；主要考慮對象時使用
function object(o){ function F(){} F.prototype=o return new F() } function createPerson(original){ var clone=object(original) //繼承原型 clone.sayName=function(){ alert("name") } return clone } var person={ name:"double", friends:["single","tom","jack"] } var person1=createPerson(person) person1.sayName() //name 引用類型值還是共享的3、寄生組合繼承
組合繼承是繼承中常常用到的，但是會調用兩次超類型構造函數；寄生組合繼承就是為了解決這個問題的
function object(o){ function F(){} F.prototype=o return new F() } function inheritPrototype(subType,superType){ var prototype=object(superType) //創建對象 (superType實例) prototype.constructor=subType //增強對象 subType.prototype=prototype //指定對象 (原型賦予實例) } function SuperType(name,sex){ this.name=name this.sex=sex this.colors=["red"] } SuperType.prototype.sayName=function(){ alert(this.name) } function SubType(name,sex,age){ SuperType.call(this,name,sex) this.age=age } inheritPrototype(SubType,SuperType) //目前subType.prototype什么都沒有 SubType.prototype.sayAge=function(){ //為subType.prototype添加個方法 alert(this.age) } var person1=new SubType("double","man",34) console.log(person1.name) //SuperType 這是個Bug console.log(person1.sex) //man console.log(person1.colors) //["red"] person1.sayAge() //34到此，差不多結束啦，感謝你對武林網的支持，希望我們整理的內容能夠幫助到你。
新聞熱點
疑難解答
