首先來(lái)討論一下原型鏈，上代碼

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

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

下面來(lái)仔細(xì)分析一下這條原型鏈，首先創(chuàng)造一個(gè)構(gòu)造函數(shù)SuperType，它指向自己的原型，而原型的constructor有指向SuperType，這是第一部分，第二次創(chuàng)造了新的構(gòu)造函數(shù)SubType，它的實(shí)例instance指向它的原型，而它的原型已經(jīng)被設(shè)定為一個(gè)SuperType的實(shí)例，而這個(gè)實(shí)例又指向SuperType的原型，所以這部分和剛剛的第一部分就聯(lián)系起來(lái)了，問(wèn)題來(lái)了，instance。constructor是誰(shuí)？沿著剛剛說(shuō)的原型鏈向上找，

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

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

?

第二種：借用構(gòu)造函數(shù)，上代碼：

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

這樣的寫(xiě)法就更容易理解了，使用call只是使用了Supertype的屬性，但是并沒(méi)有改動(dòng)任何的原型鏈，我們可以使用hasOwnProperty來(lái)證明并不是調(diào)用了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

說(shuō)白了就是改進(jìn)版，集中各個(gè)方法所長(zhǎng)，使用 借用構(gòu)造函數(shù) 方法，來(lái)設(shè)定各自實(shí)例屬性，通過(guò)原型來(lái)設(shè)定通用的方法，但是要注意，為了確保構(gòu)造函數(shù)不會(huì)重寫(xiě)子類(lèi)的屬性，要在調(diào)用超類(lèi)型構(gòu)造函數(shù)以后，再為子類(lèi)添加屬性

轉(zhuǎn)載于:https://www.cnblogs.com/aichihuamei/p/6602037.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。