先從面向對象講起，本瓜認為：面向對象編程，它的最大能力就是：復用！
咱常說，面向對象三大特點，封裝、繼承、多態(tài)。
這三個特點，以“繼承”為核心。封裝成類，是為了繼承，繼承之后再各自發(fā)展（重寫），可理解為多態(tài)。所以，根本目的是為了繼承，即“復用“！
如果你用 JavaScript 面向對象的能力來編程的話，能想到的，也只供使用的就是：基于原型。
因為這門語言設計就是這樣，我們之前也提過：JavaScript的語言設計主要受到了Self（一種基于原型的編程語言）和 Scheme（一門函數(shù)式編程語言）的影響；
它復用的能力就是來自原型！
好了，有這個認知基礎，我們再看原型繼承。
原型鏈繼承
原型繼承最直接的一種實現(xiàn)就是：原型鏈繼承
ECMA-262 把原型鏈定義為 ECMAScript 的主要繼承方式。其基本思想就是通過原型繼承多個引用類型的屬性和方法。
我們來看看原型鏈繼承的代碼實現(xiàn)：
function SuperType() { this.property = true;}function SubType() { this.subproperty = false;}SuperType.prototype.getSuperValue = function() { return this.property;};SubType.prototype.getSubValue = function () { return this.subproperty;};SubType.prototype = new SuperType(); // 對 SubType 得原型鏈重新指定，是原型鏈繼承l(wèi)et instance = new SubType();console.log(instance.getSuperValue()); // true復制代碼
還需要再額外說明查找關系嗎？？不懂得工友可見這篇 《歪理解？原型鏈中的函數(shù)和對象》
這里還是用代碼展示下它們的指向關系吧：
上面例子中有 1 個對象 instance ， 兩個函數(shù)，SuperType 和 SubType 。函數(shù)是上帝，對象是基本物質。繼承來自兩方面：1. 繼承自祖先（遺產）；2. 繼承自上帝（天賦）；
// 繼承自祖先（遺產）instance.__proto__ === SubType.prototype // trueSubType.prototype.__proto__ === SuperType.prototype // true// 繼承自上帝（天賦）SuperType.__proto__ === Function.prototype // trueSubType.__proto__ === Function.prototype // trueSuperType.prototype.__proto__ === Object.prototype // trueObject.prototype.__proto__ === null // true
當然，我們并不是來講原型鏈的。重點是：點出原型鏈繼承的“問題”！！
它的主要問題出現(xiàn)在：原型中包含引用值的時候，原型中包含的引用值會在所有實例間共享。
function SuperType() { this.colors = [“red”, “blue”, “green”];}function SubType() {}SubType.prototype = new SuperType() // 原型鏈繼承l(wèi)et 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 是個數(shù)組，引用值，當它共享給 SubType 的時候，用的是引用值，當我們實例化的時候，如果其中一個實力對它做出了修改，將會影響到其它實例的引用。
其實，我們也知道，很少在業(yè)務代碼中這樣去寫繼承：SubType.prototype = new SuperType() ，原型鏈繼承會造成復用的混亂，所以它基本不會被單獨使用。
構造函數(shù)繼承
構造函數(shù)繼承，也叫做：“盜用構造函數(shù)”，“對象偽裝”或“經典繼承”。
基本思路：在子類構造函數(shù)中用 apply()和 call()方法調用父類構造函數(shù)。
上一小節(jié)的例子改造為：
function SuperType() { this.colors = [“red”, “blue”, “green”];}function SubType() {SuperType.call(this) // 構造函數(shù)繼承}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’]
完美解決原型鏈繼承的問題，但是它也有它的問題，也是使用構造函數(shù)模式自定義類型的問題，
即：必須在構造函數(shù)中定義方法（在原型上定義方法，子類是訪問不到的），函數(shù)不能重用。
function SuperType() {}function SubType() {SuperType.call(this) // 構造函數(shù)繼承}SuperType.prototype.fn = ()=>{}let s1 = new SubType()console.log(s1.fn) // undefinedfunction SuperType() { this.fn=()=>{}}function SubType() {SuperType.call(this) // 構造函數(shù)繼承}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() // 原型鏈繼承l(wèi)et s1 = new SubType()console.log(s1.fn) // ()=>{}復制代碼function SuperType() { this.fn=()=>{}}function SubType() {}SubType.prototype = new SuperType() // 原型鏈繼承l(wèi)et s1 = new SubType()let s2 = new SubType()console.log(s1.fn === s2.fn) // true
所以，綜上，原型鏈繼承和構造函數(shù)繼承的 “毛病” 分別是：
咱就是說，這東西怎么這么擰巴呢。。。
于是乎一個規(guī)避二者“毛病”的繼承方式出現(xiàn)了：組合繼承~~
組合繼承
目前最流行的繼承模式是組合繼承！
思路是：使用原型鏈繼承原型上的屬性和方法，而通過構造函數(shù)繼承實例屬性。
function SuperType(name){ this.name = name; this.colors = [“red”, “blue”, “green”];}function SubType(name, age){ SuperType.call(this, name) // 構造函數(shù)繼承 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() // Nicholass2.sayName() // Gregs1.sayAge() // 29s2.sayAge() // 27
組合繼承，總結起來就是，屬性（特別是引用值）通過構造函數(shù)去繼承，而公用的、需要復用的方法用原型鏈去繼承！！
說實話，JS 繼承真的很奇怪。。。并不是面向對象語言，又要通過原型鏈去模擬面向對象，真的很多小坑的點需要去注意。(哈哈哈，想想還是函數(shù)式好，清晰)
我是掘金安東尼 100 萬閱讀量人氣前端技術博主 INFP 寫作人格堅持 1000 日更文 關注我，陪你一起度過漫長編程歲月
