溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
為大家分享js中最常見最詳細的繼承方式，接下來將一下面的幾個維度進行展示說明
文章有點長，請耐心閱讀😁，有什么錯誤理解的地方希望留言指出來
繼承方式
原型鏈繼承
相信小伙伴們都知道到原型鏈繼承（ECMAScript 中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法），因為原型鏈繼承非常的強大，但是也有它的缺點，接下來咱們就按照上面的維度看看原型鏈繼承到底是什么鬼
代碼實現：（需要兩個構造函數來完成一個原型鏈繼承）
// SuperType 構造函數稱為超類
function SuperType (){
this.name='super';
this.friend=[];
this.property = true;
}
SuperType.prototype.getName=function(){
return this.name;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
// SubType 構造函數稱為子類
function SubType(name,age){
this.name=name;
this.age=age;
this.subproperty = false;
}
SubType.prototype=new SuperType();
SubType.prototype.constrcutor=SubType;
SubType.prototype.getAge=function(){
return this.age;
}
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var child = new SubType('shiny',12);
console.log(child.getName)//shiny
console.log(child.getAge())//12
圖解部分 屬性
基本原理
使用類似作用域的原型鏈，進行繼承查找
語言實現
定義兩個構造函數，分別為父類（SuperType）、子類（SubType），為了實現子類能夠使用父類的屬性（本身和原型上面的屬性）。重寫子類的原型，讓子類的原型指向父類實例，這樣子類的構造函數就是父類的實例地址，實現子類可以使用父類的本身和原型上的屬性
優點
子類可以通過原型鏈的查找，實現父類的屬性公用與子類的實例
缺點
借用構造函數模式繼承
雖然原型鏈繼承很強大但是也有他的缺點，借用構造函數繼承可以解決原型鏈繼承的缺點，開線面的解釋
代碼實現：
// 把父類當中一個函數使用
function SuperType(name){
this.name=name
this.friend=['a','b']
}
SuperType.prototype.getFriend=function(){
return this.firend
}
function SubType(name){
// 執行父類函數
SuperType.call(this,name);
}
var child = new SubType('shiny')
var childRed = new SubType('red')
console.log(child.name)//shiny
console.log(childRed.name)//red
child.firend.push('c')
console.log(child.friend)//a,b,c
console.log(childRed.friend)//a,b
console.log(childRed.getFriend)//undefined
基本原理
使用call apply方法，通過執行方法修改tihs （上下文），是的父級的this變成子類實例的this，這樣每個實例都會得到父類的屬性，實現引用屬性備份
使用場景
父類中需要一些子類使用共享的引用類型，并且子類可能會操作父類共享的引用類型
但是父類的非this綁定的屬性和方法是不可以使用的（放在父類prototype的屬性和方法）
語言實現
不要把父類當中構造函數，當中一個函數來處理這樣更容易理解，在子類的構造函數中借用父類函數通過修改this來執行，這樣子類的實例包含父類的屬性
優點
缺點
組合繼承
上面的兩種繼承方式（原型鏈繼承+借用構造函數繼承），都有自己優缺點，但是他們不是很完美，下面解釋一下組合繼承
代碼實現：
function SuperType(name){
this.name=name;
this.firend=['a','b']
}
SuperType.prototype.getName=function(){
return this.name
}
function SubType(name,age){
this.age=age;
SuperType.call(this,name)
}
SubType.prototype=new SuperType();
SubType.prototype.constrcutor = SubType;
SubType.prototype.getAge=function(){
return this.age
}
var childShiny=new SubType('shiny',23);
var childRed = new SubType('red',22);
childShiny.firend.push('c');
childRed.firend.push('d');
console.log(childShiny.getName());
console.log(childShiny.getAge());
console.log(childRed.getName());
console.log(childRed.getAge());
console.log(childRed.friend);//[a,b,d]
console.log(childShiny.friend);//[a,b,c]
基本原理
使用原型鏈的繼承實現，通過原型查找功能來滿足原型鏈共享方法
使用借用構造函數方法，使用實例備份父類共享引用類型備份
使用場景
得到原型鏈繼承和構造函數繼承的優點，是被開發人員認可的一種繼承方式，但是也有他的缺點
語言實現
定義兩個構造函數，分別為父類（SuperType）、子類（SubType），為了實現子類能夠使用父類的屬性（本身和原型上面的屬性）。重寫子類的原型，讓子類的原型指向父類實例，這樣子類的構造函數就是父類的實例地址，實現子類可以使用父類的本身和原型上的屬性
不要把父類當中構造函數，當中一個函數來處理這樣更容易理解，在子類的構造函數中借用父類函數通過修改this來執行，這樣子類的實例包含父類的屬性
優點
缺點
原型式繼承
話說上面的的組合繼承不是已經被開發者認可了嗎，原型式繼承是啥？下面咱們看看原型式繼承是什么樣的。
代碼實現：
1 function object(o){
function F(){};
F.prototype=o;
return new F()
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var personShiny = object(person);
var personRed = object(person);
console.log(personShiny.name)//Nicholas
console.log(personRed.name)//Nicholas
personShiny.friends.push('red');
personRed.friends.push('shiny');
console.log(personShiny.friends)//["Shelby", "Court", "Van","red","shiny"]
//ECMAScript 5 通過新增 Object.create()方法規范化了原型式繼承。這個方法接收兩個參數：一
//個用作新對象原型的對象和（可選的）一個為新對象定義額外屬性的對象。在傳入一個參數的情況下，
//Object.create()與 object()方法的行為相同。
2
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var personShiny = Object.create(person);
var personRed = Object.create(person);
console.log(personShiny.name)//Nicholas
console.log(personRed.name)//Nicholas
personShiny.friends.push('red');
personRed.friends.push('shiny');
console.log(personShiny.friends)//["Shelby", "Court", "Van","red","shiny"]
基本原理
通過Object.create()方法來創建一個有基礎類的實例，這實例的__proto__指向基礎類
使用場景
在不使用構造函數的情況下，只想讓一個對象與另一個對象保持類似的情況下
語言實現
需要創建一個基礎對象，作為一個新對象的基礎對象，通過object方法或者Object.create方法處理得到一個新實例，這個新實例上的__proto__指向基礎對象
優點
再不用創建構造函數的情況下，實現了原型鏈繼承，代碼量減少一部分
缺點
寄生繼承
咱們看了上面的原型式繼承，其實就是和原型鏈繼承差別不大，只是省去了構造函數這一部，但是原型式繼承也是有缺點的（不能夠給備份的對象添加屬性），下面寄生繼承來解決。
代碼實現：
// 和工廠模式非常類似，創建一個對象，增強一些功能并返回該對象
function createAnother(o){
var clone = Object(o);
clone.sayHi=function(){
console.log('hi')
}
return clone
}
var person = {
name:'shiny',
friends:['a','b']
}
var personShiny = createAnother(person);
console.log(personShiny.sayHi())//Ho
基本原理
備份一個對象，然后給備份的對象進行屬性添加，并返回
使用場景
在考不使用構造函數的情況下實現繼承，前面示
范繼承模式時使用的 object()函數不是必需的；任何能夠返回新對象的函數都適用于此模式
語言實現
類似構造函數，通過一個執行方法，里面創建一個對象，為該對象添加屬性和方法，然后返回
優點
缺點
類似構造函數一樣，創建寄生的方法需要在clone對象上面添加一些想要的屬性，這些屬性是放在clone上面的一些私有的屬性
寄生組合繼承
咱們看了上面的組合繼承看上去已經很完美了，但是也有缺點（父類被實例化兩次、子類實例和子類的構造函數都有相同的屬性），寄生組合就是來解決這些問題的
代碼實現：
function inheritPrototype({SubType,SuperType}){
const prototype = Object(SuperType.prototype);
prototype.constrcutor=SubType;
SubType.prototype=prototype;
}
function SuperType(name){
this.name=name;
this.friends=['a','b']
}
SuperType.prototype.getName=function(){
return this.name;
}
function SubType(name,age){
this.age=age;
SuperType.call(this,name)
}
inheritPrototype({SubType,SuperType});
SubType.prototype.getAge=function(){
return this.age
}
var SubTypeShiny = new SubType('Shiny',23);
SubTypeShiny .friends.push('c')
var SubTypeRed = new SubType('Red',21);
SubTypeRed .friends.push('d')
console.log(SubTypeShiny.getName())//Shiny
console.log(SubTypeShiny.getAge())//22
console.log(SubTypeShiny.friends)//['a','b','c']
console.log( SubTypeRed.getName())//Red
console.log( SubTypeRed.getAge())//21
console.log( SubTypeRed.friends)//['a','b','d']
基本原理
子類構造函數內通過call、apply方法進行修改父類構造函數的this和執行父類構造函數，使的子類的實例擁有父類構造函數的一些屬性，
結合子類的原型修改成父類構造函數的原型，并把父類的原型的constructor指向子類構造函數
使用場景
在考不使用構造函數的情況下實現繼承，前面示
范繼承模式時使用的 object()函數不是必需的；任何能夠返回新對象的函數都適用于此模式
語言實現
極度類似組合寄生方式，只是修改了子類原型鏈繼承的方式，組合寄生是繼承父類的實例，寄生組合寄生則是通過一子類的原型繼承父類的原型，并把該原型的constructor指向子類構造函數
優點
缺點
暫無
下面是組合繼承和寄生組合繼承的原型圖對比
以上所述是小編給大家介紹的javascript繼承詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
