js繼承

gaosboy 發(fā)布于2019-08-22 14:00 / 2565人閱讀

摘要：使用這種方式繼承的好處可以在子類型構(gòu)造函數(shù)中向超類型構(gòu)造函數(shù)傳遞參數(shù)。下面來看一個(gè)例子繼承屬性繼承方法拼接原型鏈我們看到現(xiàn)在實(shí)例可以訪問的超類型的原型上的方法了構(gòu)造函數(shù)定義了兩個(gè)屬性和。

在了解了js 中的原型鏈之后（https://segmentfault.com/a/11...），我們再來看看js 中的幾種實(shí)現(xiàn)繼承的方式

一借用構(gòu)造函數(shù)實(shí)現(xiàn)繼承

為了解決包含引用類型值的原型屬性會(huì)被所有實(shí)例共享的問題，大神們發(fā)明了在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)然后通過apply()和call()方法在（將來）新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)的方式來實(shí)現(xiàn)繼承，如下

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
//調(diào)用SuperType 并且通過call()方法修正this指向  
SuperType.call(this);
 }
var instance1 = new SubType();
instance1.colors.push("black");
//"red,blue,green,black"
alert(instance1.colors);
//"red,blue,green"
var instance2 = new SubType();
alert(instance2.colors);

以上例子中在SubType()調(diào)用了SuperType()構(gòu)造函數(shù)。通過使用call()方法（或apply()方法也可以），我們實(shí)際上是在（未來將要）新創(chuàng)建的SubType實(shí)例的環(huán)境下調(diào)用了SuperType構(gòu)造函數(shù)。這樣一來，就會(huì)在新SubType對象上執(zhí)行SuperType()函數(shù)中定義的所有對象初始化代碼。結(jié)果，SubType的每個(gè)實(shí)例就都會(huì)具有自己的colors屬性的副本了(互不影響)。

使用這種方式繼承的好處：

可以在子類型構(gòu)造函數(shù)中向超類型構(gòu)造函數(shù)傳遞參數(shù)。如下

function SuperType(name) {
  this.name = name;
}
function SubType() {
//繼承了SuperType，同時(shí)還傳遞了參數(shù)
SuperType.call(this, "Nicholas");    
//實(shí)例屬性   
 this.age = 29;
}
var instance = new SubType();
  //"Nicholas";
alert(instance.name);
//29
alert(instance.age);

SuperType只接受一個(gè)參數(shù)name，該參數(shù)會(huì)直接賦給一個(gè)屬性。在SubType構(gòu)造函數(shù)內(nèi)部調(diào)用SuperType構(gòu)造函數(shù)時(shí)，實(shí)際上是為SubType的實(shí)例設(shè)置了name屬性。為了確保SuperType構(gòu)造函數(shù)不會(huì)重寫子類型的屬性，可以在調(diào)用超類型構(gòu)造函數(shù)后，再添加應(yīng)該在子類型中定義的屬性。

使用這種方式繼承的壞處：

1.方法都在構(gòu)造函數(shù)中定義
2.在超類型的原型中定義的方法，對子類型而言也是不可見的如下

function SuperType(name) {
  this.name = name;
}
SuperType.prototype.a=function(){
    alert("aaaa");
}
function SubType() {
//繼承了SuperType，同時(shí)還傳遞了參數(shù)
SuperType.call(this, "Nicholas");    
//實(shí)例屬性
 this.age = 29;
}
var instance = new SubType();
console.log(instance);

我們在控制臺可以看到子類型原型中無法獲取超類型的a方法

二組合繼承

將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊，從而發(fā)揮二者之長的一種繼承模式，主要的思路是使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能夠保證每個(gè)實(shí)例都有它自己的屬性。下面來看一個(gè)例子

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
//繼承name屬性    
SuperType.call(this, name);    
this.age = age;
}
//繼承方法 （拼接原型鏈）
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black"); 
//"red,blue,green,black"
alert(instance1.colors);
//"Nicholas";
instance1.sayName();
//29
instance1.sayAge();
var instance2 = new SubType("Greg", 27);
//"red,blue,green"
alert(instance2.colors);
//"27"; 
instance2.sayAge();
//"Greg"; 
instance2.sayName();

我們看到現(xiàn)在實(shí)例可以訪問的超類型的原型上的方法了
SuperType構(gòu)造函數(shù)定義了兩個(gè)屬性：name和colors。SuperType的原型定義了一個(gè)方法sayName()。Sub-Type構(gòu)造函數(shù)在調(diào)用SuperType構(gòu)造函數(shù)時(shí)傳入了name參數(shù)，緊接著又定義了它自己的屬性age。然后，將SuperType的實(shí)例賦值給SubType的原型，然后又在該新原型上定義了方法sayAge()。這樣一來，就可以讓兩個(gè)不同的SubType實(shí)例既分別擁有自己屬性——包括colors屬性，又可以使用相同的方法了這種方式是目前js實(shí)現(xiàn)繼承使用的最常見的方式

使用這種繼承方式的不足

SubType.prototype = new SuperType()的確會(huì)創(chuàng)建一個(gè)關(guān)聯(lián)到SubType.prototype 的新對象。但是它使用了SubType(..)的“構(gòu)造函數(shù)調(diào)用”，如果函數(shù)SubType有一些副作用（比如寫日志、修改狀態(tài)、注冊到其他對象、給this添加數(shù)據(jù)屬性，等等）的話，就會(huì)影響到SubType()的“后代”。

改進(jìn)方法

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
  //繼承name屬性    
  SuperType.call(this, name);    
  this.age = age;
}
//使用Object.create 生成對象來代替new SuperType()生成的對象

SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
console.log(instance1 )；

這樣可以避免對SubType后代的影響
注

// ES6之前需要拋棄默認(rèn)的SubType.prototype
SubType.ptototype = Object.create( SuperType.prototype );
// ES6開始可以直接修改現(xiàn)有的
SubType.prototypeObject.setPrototypeOf( SubType.prototype, SuperType.prototype );

可以參考(https://www.liaoxuefeng.com/w...