快捷導(dǎo)航

js繼承的6種方式詳解

更新時(shí)間：2021年04月06日 15:10:57 作者：Selfimpr歐

這篇文章主要給大家介紹了關(guān)于js繼承的6種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

原型鏈繼承

原型鏈繼承是ECMAScript的主要繼承方式。其基本思想就是通過(guò)原型繼承多個(gè)引用類(lèi)型的屬性和方法。什么是原型鏈?每個(gè)構(gòu)造函數(shù)都會(huì)有一個(gè)原型對(duì)象，調(diào)用構(gòu)造函數(shù)創(chuàng)建的實(shí)例會(huì)有一個(gè)指針__proto__指向原型對(duì)象,這個(gè)原型可能是另一個(gè)類(lèi)型的實(shí)例，所以?xún)?nèi)部可能也有一個(gè)指針指向另一個(gè)原型，然后就這樣形成了一條原型鏈。

代碼:
function SuperType() {
	this.property = true;
}
SuperType.prototype.getSuperValue = function() {
	return this.property;
};
function SubType() {
	this.subproperty = false;
}
// 繼承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () { //注意 不能通過(guò)對(duì)象字面量的方式添加新方法，否則上一行無(wú)效
	return this.subproperty; 
};
let instance = new SubType();
console.log(instance.getSuperValue()); // true

缺點(diǎn)

1.如果父類(lèi)實(shí)例的屬性是引用類(lèi)型的時(shí)候，其實(shí)父類(lèi)的實(shí)例屬性會(huì)成為子類(lèi)的原型屬性,子類(lèi)創(chuàng)建的所有實(shí)例都會(huì)共享這些方法，修改一個(gè)實(shí)例的這個(gè)屬性，其他實(shí)例的屬性也會(huì)被修改

2.子類(lèi)型在實(shí)例化時(shí)不能給父類(lèi)型的構(gòu)造函數(shù)傳參

構(gòu)造函數(shù)繼承

為了解決原型包含引用值導(dǎo)致的繼承問(wèn)題，出現(xiàn)了一中'盜用構(gòu)造函數(shù)'的技術(shù)流行起來(lái)，也被稱(chēng)為'對(duì)象偽裝'或'經(jīng)典繼承'，思路就是在子類(lèi)構(gòu)造函

數(shù)中調(diào)用父類(lèi)構(gòu)造函數(shù)?？梢允褂胏all() apply()的方法以新創(chuàng)建的對(duì)象為上下文執(zhí)行函數(shù)

function SuperType(name) {
 this.colors = ["red","blue","green"];
 this.name = name;
 }
function SubType(name) {
 SuperType.call(this,name);
}
let instance1 = new SuperType('小明')
let instance2 = new SuperType('小白')
instance1.colors .push('yellow')
console.log(instance1) //{name:"小明",colors:["red","blue","green","yellow"]...}
console.log(instance2) //{name:"小白",colors:["red","blue","green"]...}

//可以傳遞參數(shù) 也修復(fù)了引用的問(wèn)題 可以繼承多個(gè)構(gòu)造函數(shù)屬性（call多個(gè)）

缺點(diǎn):

1.只能在構(gòu)造函數(shù)中調(diào)用方法函數(shù)不能重用就是每次子類(lèi)生成實(shí)例的時(shí)候都會(huì)生成一次屬性和方法
2. 子類(lèi)無(wú)法訪問(wèn)到父類(lèi)原型上的方法

組合繼承

綜合了原型鏈和構(gòu)造函數(shù)，將兩者的優(yōu)點(diǎn)集中了起來(lái)?；镜乃悸肥鞘褂迷玩溊^承原型上的屬性和方法，而通過(guò)構(gòu)造函數(shù)繼承實(shí)例屬性。這樣既可以把方法定義在原型上以實(shí)現(xiàn)重用，又可以讓每個(gè)實(shí)例都有自己的屬性。

function SuperType(name){
	this.name = name;
	this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
	console.log(this.name);
};
function SubType(name, age){
	// 繼承屬性 第二次調(diào)用
	SuperType.call(this, name);
	this.age = age;
}
// 繼承方法 第一次調(diào)用
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
	console.log(this.age);
};
let instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //["red,blue,green,black"]
instance1.sayName(); // "Nicholas";
instance1.sayAge(); // 29
let instance2 = new SubType("Greg", 27);
console.log(instance2.colors); // ["red,blue,green"]
instance2.sayName(); // "Greg";
instance2.sayAge(); // 27

//可以繼承父類(lèi)原型上的屬性，可以傳參，可復(fù)用。 每個(gè)新實(shí)例引入的構(gòu)造函數(shù)屬性是私有的

缺點(diǎn)

調(diào)用了兩次父類(lèi)構(gòu)造函數(shù) 比較耗內(nèi)存

原型式繼承

即使不自定義類(lèi)型也可以通過(guò)原型實(shí)現(xiàn)對(duì)象之間的信息共享。

function object(person) {
 function F() {}
 F.prototype = person
 return new F()
}

let person = {
 name:'小明',
 colors:['red','blue']
}

let person1 = object(person)
person1.colors.push('green')
let person2 = object(person)
person1.colors.push('yellow')
console.log(person) //['red','blue','green','yellow']

適用環(huán)境: 你有一個(gè)對(duì)象，想在它的基礎(chǔ)上再創(chuàng)建一個(gè)新對(duì)象。你需要把這個(gè)對(duì)象先傳給object() ，然后再對(duì)返回的對(duì)象進(jìn)行適當(dāng)修改。類(lèi)似于 Object.create()只傳第一個(gè)參數(shù)的時(shí)候，本質(zhì)上就是對(duì)傳入的對(duì)象進(jìn)行了一次淺復(fù)制,缺點(diǎn)就是新實(shí)例的屬性都是后面添加的,無(wú)法復(fù)用

寄生式繼承

與原型式繼承比較接近的一種繼承方式是寄生式繼承，類(lèi)似于寄生構(gòu)造函數(shù)和工廠模式：創(chuàng)建一個(gè)實(shí)現(xiàn)繼承的函數(shù)，以某種方式增強(qiáng)對(duì)象，然后返回這個(gè)對(duì)象。

function object(person) {
 function F() {}
 F.prototype = person
 return new F()
}
function createAnother(original){
	let clone = object(original); // 通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象
	clone.sayHi = function() { // 以某種方式增強(qiáng)這個(gè)對(duì)象
	console.log("hi");
};
	return clone; // 返回這個(gè)對(duì)象
}

寄生式繼承同樣適合主要關(guān)注對(duì)象，而不在乎類(lèi)型和構(gòu)造函數(shù)的場(chǎng)景。
缺點(diǎn):通過(guò)寄生式繼承給對(duì)象添加函數(shù)會(huì)導(dǎo)致函數(shù)難以重用，與構(gòu)造函數(shù)模式類(lèi)似

寄生式組合繼承

最常用的繼承方式，也是最佳的，組合繼承會(huì)調(diào)用兩次父類(lèi)構(gòu)造函數(shù)，存在效率問(wèn)題。其實(shí)本質(zhì)上子類(lèi)原型最終是要包含父類(lèi)對(duì)象的所有實(shí)例屬性，子類(lèi)構(gòu)造函數(shù)只要在執(zhí)行時(shí)重寫(xiě)自己的原型就行了?；舅悸肥遣煌ㄟ^(guò)調(diào)用父類(lèi)構(gòu)造函數(shù)給子類(lèi)原型賦值，而是取得父類(lèi)原型的一個(gè)副本。說(shuō)到底就是使用寄生式繼承來(lái)繼承父類(lèi)原型，然后將返回的新對(duì)象賦值給子類(lèi)原型。

//核心代碼
function object(person) {
 function F(params) {}
 F.prototype = person
 return new F()
}
function inheritPrototype(SubType,SuperType) {
 let prototype = object(SuperType.prototype) //生成一個(gè)父類(lèi)原型的副本

 //重寫(xiě)這個(gè)實(shí)例的constructor
 prototype.constructor = SubType

 //將這個(gè)對(duì)象副本賦值給 子類(lèi)的原型
 SubType.prototype = prototype
}

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;
}

//調(diào)用inheritPrototype函數(shù)給子類(lèi)原型賦值,修復(fù)了組合繼承的問(wèn)題
inheritPrototype(SubType, SuperType);

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