首先來討論一下原型鏈，上代碼

1 function SuperType(){ 2 this.property = true; 3 } 4 5 SuperType.prototype.getSuperValue = function(){ 6 console.log(this.property); 7 } 8 9 function SubType(){ 10 this.subproperty = false; 11 } 12 13 SubType.prototype = new SuperType(); 14 15 SubType.prototype.getSubValue = function(){ 16 console.log(this.subproperty); 17 } 18 19 var instance = new SubType(); 20 21 console.log(instance.getSuperValue());//true

前三行創建了一個名為SuperType的構造器，并為其添加了一個屬性propertype，其值設為true，然后在SuperType的原型上添加方法getSuperValue，功能是輸出屬性property的值，第一個構造函數完畢。9到11行創建第二個構造函數并添加屬性subproperty，其值設為false。重點部分：第13行，把一個SuperType的實例賦值給SubType的原型。后面同樣為SubType的原型添加一個方法。然后創建一個Subtype的實例，調用getSuperValue方法，返回true。?

下面來仔細分析一下這條原型鏈，首先創造一個構造函數SuperType，它指向自己的原型，而原型的constructor有指向SuperType，這是第一部分，第二次創造了新的構造函數SubType，它的實例instance指向它的原型，而它的原型已經被設定為一個SuperType的實例，而這個實例又指向SuperType的原型，所以這部分和剛剛的第一部分就聯系起來了，問題來了，instance。constructor是誰？沿著剛剛說的原型鏈向上找，

console.log(instance.constructor);//SuperType

同理，SuperType其實還能沿著原型鏈向上，上面就是Object。

?

第二種：借用構造函數，上代碼：

1 function SuperType(name){ 2 this.name = name; 3 } 4 5 function SubType(){ 6 SuperType.call(this,"jiangjie"); 7 this.age = 20; 8 } 9 10 var instance = new SubType(); 11 12 console.log(instance.name);//jiangjie 13 console.log(instance.age);//20 14 15 console.log(instance.constructor);//Subtype 16 console.log(Object.getPrototypeOf(instance)==SubType.prototype);//true 17 18 console.log(instance.hasOwnProperty("name"));//true

這樣的寫法就更容易理解了，使用call只是使用了Supertype的屬性，但是并沒有改動任何的原型鏈，我們可以使用hasOwnProperty來證明并不是調用了SuperType作為原型，

?

第三種：組合繼承，上代碼

1 function SuperType(name){ 2 this.color = ['red','black','white']; 3 this.name = name; 4 } 5 6 7 SuperType.prototype.sayName = function(){ 8 console.log(this.name); 9 } 10 11 function SubType(name,age){ 12 SuperType.call(this,name); 13 this.age = age; 14 } 15 16 SubType.prototype = new SuperType(); 17 18 SubType.prototype.sayAge = function(){ 19 console.log(this.age); 20 } 21 22 var instance1 = new SubType('jaingjie','20'); 23 var instance2 = new SubType('lukexin','20'); 24 25 instance1.color.push('green'); 26 console.log(instance1.color);//['red','black','white','green']; 27 console.log(instance1.sayName());//jiangjie 28 console.log(instance1.sayAge());//20 29 30 console.log(instance2.color);//['red','black','white']; 31 console.log(instance2.sayName());//lukexin 32 console.log(instance2.sayAge());//20

說白了就是改進版，集中各個方法所長，使用 借用構造函數 方法，來設定各自實例屬性，通過原型來設定通用的方法，但是要注意，為了確保構造函數不會重寫子類的屬性，要在調用超類型構造函數以后，再為子類添加屬性

轉載于:https://www.cnblogs.com/aichihuamei/p/6602037.html

總結

以上是生活随笔為你收集整理的js高程(二)-----继承的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。