快捷導(dǎo)航

JavaScript 實(shí)現(xiàn)繼承的幾種方式

更新時(shí)間：2021年02月19日 09:28:14 作者：him8

這篇文章主要介紹了JavaScript 實(shí)現(xiàn)繼承的幾種方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

構(gòu)造繼承 (借助call實(shí)現(xiàn))

實(shí)現(xiàn)

function Super(age){
 this.age = age;
 this.say = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
var child = new Child("min",23)
console.log(child instanceof Super); // false
console.log(child instanceof Child); // true

優(yōu)點(diǎn)

(1) 可以實(shí)現(xiàn)多繼承(call多個(gè)父類對(duì)象)
(2) 構(gòu)造函數(shù)中可向父級(jí)傳遞參數(shù)

缺點(diǎn)

(1) 只能繼承父類實(shí)例的屬性和方法，不能繼承原型上的屬性和方法
(2) 實(shí)例并不是父類的實(shí)例，只是子類的實(shí)例

原型鏈繼承 (借助原型鏈實(shí)現(xiàn))

實(shí)現(xiàn)

function Super(){
 this.getName = function(){
 console.log(this.name)
 }
}
function Child(name){
	this.name = name;
}
Child.prototype = new Super(); // 這里可以傳構(gòu)造參數(shù)
Child.prototype.constructor = Child;
var child = new Child("min");
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

優(yōu)點(diǎn)
(1) 父類原型屬性與方法，子類都能訪問到
(2) 實(shí)例是子類的實(shí)例，也是父類的實(shí)例

缺點(diǎn)
(1) 無(wú)法實(shí)現(xiàn)多繼承 (2) 創(chuàng)建子類實(shí)例時(shí)，無(wú)法向父類構(gòu)造函數(shù)傳參

組合繼承 (構(gòu)造繼承+原型鏈繼承)

實(shí)現(xiàn)

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age);
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = new Super(1); 
Child.prototype.constructor = Child;
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

優(yōu)點(diǎn)
(1) 結(jié)合了構(gòu)造+原型鏈繼承的優(yōu)點(diǎn)

缺點(diǎn)
(1) Child.prototype = new Super(); 多調(diào)用了一次，使得原型對(duì)象中存在一些不必要屬性，如上面例子中age屬性

寄生組合繼承

實(shí)現(xiàn)

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
(function(){
 function Copy(){}
 Copy.prototype = Super.prototype;
 Child.prototype = new Copy();
})()
Child.prototype.constructor = Child;
var child = new Child("min",23);

備注
問：為什么沒有直接使用 Child.prototype = Super.prototype;
答：Child.prototype.constructor = Child;關(guān)鍵代碼，上面寫Super.prototype 也會(huì)變(引用類型，指向同一地址)

優(yōu)點(diǎn)
(1) 這應(yīng)該是實(shí)現(xiàn)繼承最完美的方案了，es6的extends關(guān)鍵字，在babel轉(zhuǎn)換后代碼也是通過(guò)這種方式實(shí)現(xiàn)的繼承。

額外：借助(Object.create)

實(shí)現(xiàn)

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = Object.create(Super.prototype,{
 constructor:{ // 構(gòu)造函數(shù)修復(fù)
 value: Child
 }
})
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

以上就是JavaScript 實(shí)現(xiàn)繼承的幾種方式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 實(shí)現(xiàn)繼承的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: