原型鏈繼承
原型鏈繼承是ECMAScript的主要繼承方式。其基本思想就是通過原型繼承多個引用類型的屬性和方法。什么是原型鏈?每個構(gòu)造函數(shù)都會有一個原型對象，調(diào)用構(gòu)造函數(shù)創(chuàng)建的實例會有一個指針__proto__指向原型對象,這個原型可能是另一個類型的實例，所以內(nèi)部可能也有一個指針指向另一個原型，然后就這樣形成了一條原型鏈。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
代碼:function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;};function SubType() { this.subproperty = false;}// 繼承SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function () { //注意 不能通過對象字面量的方式添加新方法，否則上一行無效 return this.subproperty; };let instance = new SubType();console.log(instance.getSuperValue()); // true |
缺點
1.如果父類實例的屬性是引用類型的時候，其實父類的實例屬性會成為子類的原型屬性,子類創(chuàng)建的所有實例都會共享這些方法，修改一個實例的這個屬性，其他實例的屬性也會被修改
2.子類型在實例化時不能給父類型的構(gòu)造函數(shù)傳參
構(gòu)造函數(shù)繼承
為了解決原型包含引用值導(dǎo)致的繼承問題，出現(xiàn)了一中'盜用構(gòu)造函數(shù)'的技術(shù)流行起來，也被稱為'對象偽裝'或'經(jīng)典繼承'，思路就是在子類構(gòu)造函
數(shù)中調(diào)用父類構(gòu)造函數(shù)?？梢允褂胏all() apply()的方法以新創(chuàng)建的對象為上下文執(zhí)行函數(shù)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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ù)了引用的問題 可以繼承多個構(gòu)造函數(shù)屬性（call多個） |
缺點:
1.只能在構(gòu)造函數(shù)中調(diào)用方法 函數(shù)不能重用 就是每次子類生成實例的時候都會生成一次屬性和方法
2. 子類無法訪問到父類原型上的方法
組合繼承
綜合了原型鏈和構(gòu)造函數(shù)，將兩者的優(yōu)點集中了起來。基本的思路是使用原型鏈繼承原型上的屬性和方法，而通過構(gòu)造函數(shù)繼承實例屬性。這樣既可以把方法定義在原型上以實現(xiàn)重用，又可以讓每個實例都有自己的屬性。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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(); // 29let instance2 = new SubType("Greg", 27);console.log(instance2.colors); // ["red,blue,green"]instance2.sayName(); // "Greg";instance2.sayAge(); // 27//可以繼承父類原型上的屬性，可以傳參，可復(fù)用。 每個新實例引入的構(gòu)造函數(shù)屬性是私有的 |
缺點
調(diào)用了兩次父類構(gòu)造函數(shù) 比較耗內(nèi)存
原型式繼承
即使不自定義類型也可以通過原型實現(xiàn)對象之間的信息共享。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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)境: 你有一個對象，想在它的基礎(chǔ)上再創(chuàng)建一個新對象。你需要把這個對象先傳給object() ，然后再對返回的對象進行適當(dāng)修改。類似于 Object.create()只傳第一個參數(shù)的時候，本質(zhì)上就是對傳入的對象進行了一次淺復(fù)制,缺點就是新實例的屬性都是后面添加的,無法復(fù)用
寄生式繼承
與原型式繼承比較接近的一種繼承方式是寄生式繼承，類似于寄生構(gòu)造函數(shù)和工廠模式：創(chuàng)建一個實現(xiàn)繼承的函數(shù)，以某種方式增強對象，然后返回這個對象。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function object(person) { function F() {} F.prototype = person return new F()}function createAnother(original){ let clone = object(original); // 通過調(diào)用函數(shù)創(chuàng)建一個新對象 clone.sayHi = function() { // 以某種方式增強這個對象 console.log("hi");}; return clone; // 返回這個對象} |
寄生式繼承同樣適合主要關(guān)注對象，而不在乎類型和構(gòu)造函數(shù)的場景。
缺點:通過寄生式繼承給對象添加函數(shù)會導(dǎo)致函數(shù)難以重用，與構(gòu)造函數(shù)模式類似
寄生式組合繼承
最常用的繼承方式，也是最佳的，組合繼承會調(diào)用兩次父類構(gòu)造函數(shù)，存在效率問題。其實本質(zhì)上子類原型最終是要包含父類對象的所有實例屬性，子類構(gòu)造函數(shù)只要在執(zhí)行時重寫自己的原型就行了?；舅悸肥遣煌ㄟ^調(diào)用父類構(gòu)造函數(shù)給子類原型賦值，而是取得父類原型的一個副本。說到底就是使用寄生式繼承來繼承父類原型，然后將返回的新對象賦值給子類原型。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
//核心代碼function object(person) { function F(params) {} F.prototype = person return new F()}function inheritPrototype(SubType,SuperType) { let prototype = object(SuperType.prototype) //生成一個父類原型的副本 //重寫這個實例的constructor prototype.constructor = SubType //將這個對象副本賦值給 子類的原型 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ù)給子類原型賦值,修復(fù)了組合繼承的問題inheritPrototype(SubType, SuperType);SubType.prototype.sayAge = function() { console.log(this.age);}; |
總結(jié)
到此這篇關(guān)于js繼承的6種方式的文章就介紹到這了,更多相關(guān)js繼承方式內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_42736311/article/details/115449230
