js實現繼承的方法及優缺點有哪些

小編給大家分享一下js實現繼承的方法及優缺點有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1. 原型鏈

ECMAScript中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。

原型鏈繼承的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。

簡單回顧一下構造函數、原型和實例的關系：每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。

那么，假如我們讓原型對象等于另一個類型的實例，結果會怎么樣呢？顯然，此時的原型對象將包含一個指向另一個原型的指針，相應地，另一個原型中也包含著一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的實例，那么上述關系依然成立，如此層層遞進，就構成了實例與原型的鏈條。這就是所謂原型鏈的基本概念。

function SuperType() {
 this.property = true;
}
SuperType.prototype.getSuperValue = function () {
 return this.property;
}
function SubType() {
 this.subProperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
 return this.subproperty;
};

var instance = new SubType();
console.log(instance.getSuperValue());  //true

以上代碼定義了兩個類型：SuperType和SubType。每個類型分別有一個屬性和一個方法。它們的主要區別是SubType繼承了SuperType，而繼承是通過創建SuperType的實例，并將該實例賦給SubType.prototype實現的。實現的本質是重寫原型對象，代之以一個新類型的實例。換句話說，原來存在于SuperType的實例中的所有屬性和方法，現在也存在于SubType.prototype中了。在確立了繼承關系之后，我們給SubType.prototype添加了一個方法，這樣就在繼承了SuperType的屬性和方法的基礎上又添加了一個新方法

要注意instance.constructor現在指向的是SuperType，這是因為原來SubType.prototype中的constructor被重寫了的緣故。實際上，不是SubType的原型的constructor屬性被重寫了，而是SubType的原型指向了另一個對象——SuperType的原型，而這個原型對象的constructor屬性指向的是SuperType

別忘記默認的原型

事實上，前面例子中展示的原型鏈還少一環。我們知道，所有引用類型默認都繼承了Object，而這個繼承也是通過原型鏈實現的。大家要記住，所有函數的默認原型都是Object的實例，因此默認原型都會包含一個內部指針，指向Object.prototype。這也正是所有自定義類型都會繼承toString()、valueOf()等默認方法的根本原因

原型鏈的問題

原型鏈雖然很強大，可以用它來實現繼承，但它也存在一些問題。其中，最主要的問題來自包含引用類型值的原型

function SuperType(){
 this.colors = ["red", "blue", "green"];
}

function SubType(){
}
//繼承了SuperType
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);  //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors);  //"red,blue,green,black"

原型鏈的第二個問題是：在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。實際上，應該說是沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數傳遞參數。有鑒于此，再加上前面剛剛討論過的由于原型中包含引用類型值所帶來的問題，實踐中很少會單獨使用原型鏈

2. 借用構造函數

在子類型構造函數的內部調用超類型構造函數

function SuperType() {
 this.colors = ['red', 'blue', 'green'];
}
function SubType() {
 SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors); //"red,blue,green"

通過使用call()方法（或apply()方法也可以），我們實際上是在（未來將要）新創建的SubType實例的環境下調用了SuperType構造函數。這樣一來，就會在新SubType對象上執行SuperType()函數中定義的所有對象初始化代碼。結果，SubType的每個實例就都會具有自己的colors屬性的副本了

對于原型鏈而言，借用構造函數有一個很大的優勢，即可以在子類型構造函數中向超類型構造函數傳遞參數

function SuperType() {
 this.colors = ['red', 'blue', 'green'];
}
function SubType() {
 SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.colors); //"red,blue,green"

借用構造函數問題：

方法都在構造函數中定義，因此函數復用就無從談起了。而且，在超類型的原型中定義的方法，對子類型而言也是不可見的，結果所有類型都只能使用構造函數模式

3. 組合繼承

組合繼承（combination inheritance），有時候也叫做偽經典繼承，指的是將原型鏈和借用構造函數的技術組合到一塊，從而發揮二者之長的一種繼承模式。其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數復用，又能夠保證每個實例都有它自己的屬性

function SuperType(name){
 this.name = name;
 this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
 console.log(this.name);
};

function SubType(name, age){ 

 //繼承屬性
 SuperType.call(this, name);
 
 this.age = age;
}

//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
 console.log(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors);  //"red,blue,green,black"
instance1.sayName();   //"Nicholas";
instance1.sayAge();   //29

var instance2 = new SubType("Greg", 27);
console.log(instance2.colors);  //"red,blue,green"
instance2.sayName();   //"Greg";
instance2.sayAge();   //27

組合繼承避免了原型鏈和借用構造函數的缺陷，融合了它們的優點，成為JavaScript中最常用的繼承模式。而且，instanceof和isPrototypeOf也能夠用于識別基于組合繼承創建的對象。

無論什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部

4. 原型式繼承

這種方法并沒有使用嚴格意義上的構造函數。借助原型可以基于已有的對象創建新對象，同時還不必因此創建自定義類型

function object(o){
 function F(){}
 F.prototype = o;
 return new F();
}
var person = {
 name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

console.log(person.friends); //"Shelby,Court,Van,Rob,Barbie"

ECMAScript 5通過新增Object.create()方法規范化了原型式繼承。這個方法接收兩個參數：一個用作新對象原型的對象和（可選的）一個為新對象定義額外屬性的對象。在傳入一個參數的情況下，Object.create()與object()方法的行為相同。
Object.create()方法的第二個參數與Object.defineProperties()方法的第二個參數格式相同：每個屬性都是通過自己的描述符定義的。以這種方式指定的任何屬性都會覆蓋原型對象上的同名屬性

var person = {
 name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person, {
 name: {
  value: "Greg"
 }
});

console.log(anotherPerson.name); //"Greg"

在沒有必要興師動眾地創建構造函數，而只想讓一個對象與另一個對象保持類似的情況下，原型式繼承是完全可以勝任的。不過別忘了，包含引用類型值的屬性始終都會共享相應的值，就像使用原型模式一樣

5. 寄生式繼承

創建一個僅用于封裝繼承過程的函數，該函數在內部以某種方式來增強對象，最后再像真的是它做了所有工作一樣返回對象

function createAnother(original){
 var clone = Object.create(original); //通過調用函數創建一個新對象
 clone.sayHi = function(){   //以某種方式來增強這個對象
  console.log("hi");
 };
 return clone;     //返回這個對象
}

在這個例子中，createAnother()函數接收了一個參數，也就是將要作為新對象基礎的對象。然后，把這個對象（original）傳遞給object()函數，將返回的結果賦值給clone。再為clone對象添加一個新方法sayHi()，最后返回clone對象。可以像下面這樣來使用createAnother()函數：

var person = {
 name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

這個例子中的代碼基于person返回了一個新對象——anotherPerson。新對象不僅具有person的所有屬性和方法，而且還有自己的sayHi()方法

使用寄生式繼承來為對象添加函數，會由于不能做到函數復用而降低效率；這一點與構造函數模式類似

6. 寄生組合式繼承

前面說過，組合繼承是JavaScript最常用的繼承模式；不過，它也有自己的不足。組合繼承最大的問題就是無論什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部。沒錯，子類型最終會包含超類型對象的全部實例屬性，但我們不得不在調用子類型構造函數時重寫這些屬性。再來看一看下面組合繼承的例子

function SuperType(name){
 this.name = name;
 this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
 console.log(this.name);
};

function SubType(name, age){ 
 SuperType.call(this, name);   //第二次調用SuperType()

 this.age = age;
}

SubType.prototype = new SuperType(); //第一次調用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
 console.log(this.age);
};

在第一次調用SuperType構造函數時，SubType.prototype會得到兩個屬性：name和colors；它們都是SuperType的實例屬性，只不過現在位于SubType的原型中。當調用SubType構造函數時，又會調用一次SuperType構造函數，這一次又在新對象上創建了實例屬性name和colors,于是，這兩個屬性就屏蔽了原型中的兩個同名屬性

如上圖所示，有兩組name和colors屬性：一組在實例上，一組在SubType原型中。這就是調用兩次SuperType構造函數的結果。好在我們已經找到了解決這個問題方法——寄生組合式繼承。

所謂寄生組合式繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法。

其背后的基本思路是：不必為了指定子類型的原型而調用超類型的構造函數，我們所需要的無非就是超類型原型的一個副本而已。本質上，就是使用寄生式繼承來繼承超類型的原型，然后再將結果指定給子類型的原型。寄生組合式繼承的基本模式如下所示

function inheritPrototype(subType, superType){
 var prototype = Object.create(superType.prototype);  //創建對象
 prototype.constructor = subType;     //增強對象
 subType.prototype = prototype;      //指定對象
}

這個示例中的inheritPrototype()函數實現了寄生組合式繼承的最簡單形式。這個函數接收兩個參數：子類型構造函數和超類型構造函數。在函數內部，第一步是創建超類型原型的一個副本。第二步是為創建的副本添加constructor屬性，從而彌補因重寫原型而失去的默認的constructor屬性。最后一步，將新創建的對象（即副本）賦值給子類型的原型。這樣，我們就可以用調用inheritPrototype()函數的語句，去替換前面例子中為子類型原型賦值的語句了

function SuperType(name){
 this.name = name;
 this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
 console.log(this.name);
};

function SubType(name, age){ 
 SuperType.call(this, name);

 this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
 console.log(this.age);
};

這個例子的高效率體現在它只調用了一次SuperType構造函數，并且因此避免了在SubType.prototype上面創建不必要的、多余的屬性。與此同時，原型鏈還能保持不變；因此，還能夠正常使用instanceof和isPrototypeOf()。開發人員普遍認為寄生組合式繼承是引用類型最理想的繼承范式。

以上是“js實現繼承的方法及優缺點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！