這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
先從面向物件講起，本瓜認為：面向物件編程，它的最大能力就是：復用！
咱常說，面向物件三大特點，封裝、繼承、多型，
這三個特點，以“繼承”為核心，封裝成類，是為了繼承，繼承之后再各自發展（重寫），可理解為多型，所以，根本目的是為了繼承，即“復用“！
如果你用 JavaScript 面向物件的能力來編程的話，能想到的，也只供使用的就是：基于原型，
因為這門語言設計就是這樣，我們之前也提過：JavaScript的語言設計主要受到了Self（一種基于原型的編程語言）和 Scheme（一門函式式編程語言）的影響；
它復用的能力就是來自原型！
好了，有這個認知基礎，我們再看原型繼承，
原型鏈繼承
原型繼承最直接的一種實作就是：原型鏈繼承
ECMA-262 把原型鏈定義為 ECMAScript 的主要繼承方式，其基本思想就是通過原型繼承多個參考型別的屬性和方法，
我們來看看原型鏈繼承的代碼實作：
function SuperType() {
this.property = true;
}
function SubType() {
this.subproperty = false;
}
SuperType.prototype.getSuperValue = https://www.cnblogs.com/smileZAZ/p/function() {
return this.property;
};
SubType.prototype.getSubValue = function () {
return this.subproperty;
};
SubType.prototype = new SuperType(); // 對 SubType 得原型鏈重新指定，是原型鏈繼承
let instance = new SubType();
console.log(instance.getSuperValue()); // true
還需要再額外說明查找關系嗎？？不懂得工友可見這篇 《歪理解？原型鏈中的函式和物件》
這里還是用代碼展示下它們的指向關系吧：
上面例子中有 1 個物件 instance ， 兩個函式，SuperType 和 SubType ，函式是上帝，物件是基本物質，繼承來自兩方面：1. 繼承自祖先（遺產）；2. 繼承自上帝（天賦）；
// 繼承自祖先（遺產） instance.__proto__ === SubType.prototype // true SubType.prototype.__proto__ === SuperType.prototype // true // 繼承自上帝（天賦） SuperType.__proto__ === Function.prototype // true SubType.__proto__ === Function.prototype // true SuperType.prototype.__proto__ === Object.prototype // true Object.prototype.__proto__ === null // true
當然，我們并不是來講原型鏈的，重點是：點出原型鏈繼承的“問題”！！
它的主要問題出現在：原型中包含參考值的時候，原型中包含的參考值會在所有實體間共享，
function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType() // 原型鏈繼承
let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green', 'yellow']
colors 是個陣列，參考值，當它共享給 SubType 的時候，用的是參考值，當我們實體化的時候，如果其中一個實力對它做出了修改，將會影響到其它實體的參考，
其實，我們也知道，很少在業務代碼中這樣去寫繼承：SubType.prototype = new SuperType() ，原型鏈繼承會造成復用的混亂，所以它基本不會被單獨使用，
建構式繼承
建構式繼承，也叫做：“盜用建構式”，“物件偽裝”或“經典繼承”，
基本思路：在子類建構式中用 apply()和 call()方法呼叫父類建構式，
上一小節的例子改造為：
function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {
SuperType.call(this) // 建構式繼承
}
let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
完美解決原型鏈繼承的問題，但是它也有它的問題，也是使用建構式模式自定義型別的問題，
即：必須在建構式中定義方法（在原型上定義方法，子類是訪問不到的），函式不能重用，
function SuperType() {
}
function SubType() {
SuperType.call(this) // 建構式繼承
}
SuperType.prototype.fn = ()=>{}
let s1 = new SubType()
console.log(s1.fn) // undefined
function SuperType() {
this.fn=()=>{}
}
function SubType() {
SuperType.call(this) // 建構式繼承
}
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // false
而這一點，在原型鏈繼承中，又是可以的，，，
function SuperType() {}
function SubType() {}
SuperType.prototype.fn = ()=>{}
SubType.prototype = new SuperType() // 原型鏈繼承
let s1 = new SubType()
console.log(s1.fn) // ()=>{}
function SuperType() {
this.fn=()=>{}
}
function SubType() {}
SubType.prototype = new SuperType() // 原型鏈繼承
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // true
所以，綜上，原型鏈繼承和建構式繼承的 “毛病” 分別是：
- 原型鏈繼承：所有繼承的屬性和方法都會在物件實體間共享，無法做到實體私有，
- 建構式繼承：子類不能訪問父類原型上的方法，
咱就是說，這東西怎么這么擰巴呢，，，
于是乎一個規避二者“毛病”的繼承方式出現了：組合繼承~~
組合繼承
目前最流行的繼承模式是組合繼承！
思路是：使用原型鏈繼承原型上的屬性和方法，而通過建構式繼承實體屬性，
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
SuperType.call(this, name) // 建構式繼承
this.age = age;
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
SubType.prototype = new SuperType() // 原型鏈繼承
SubType.prototype.sayAge = function() {
console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27
組合繼承，總結起來就是，屬性（特別是參考值）通過建構式去繼承，而公用的、需要復用的方法用原型鏈去繼承！！
說實話，JS 繼承真的很奇怪，，，并不是面向物件語言，又要通過原型鏈去模擬面向物件，真的很多小坑的點需要去注意，(哈哈哈，想想還是函式式好，清晰)
本文轉載于:
https://juejin.cn/post/7107779239281164301
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498878.html
標籤：JavaScript