> ## **繼承** - **類的繼承** 繼承的基本原理就是原型鏈，繼承的本質就是原型鏈，如果沒有原型鏈在JS中是很難實現繼承的。 **繼承的方式** 1.構造函數實現繼承 代碼 ``` /* 將父級的構造函數this指向，指到子構造函數的實例上去，這樣在子類中就可以看到父類的屬性和方法 */ function Parent1() { this.name = 'parent1' } function Child1() { Parent1.call(this) // 把父級parent1構造函數在子類的構造函數里面執行的話同時修改了父級構造函數的this指向，也就是指向了child1這個類實例化的對象的引用。說白了就是this指向從而導致父類執行的時候這個屬性都會掛在到child1這個類的實例上去 this.type = 'child1' } console.log(new Child1) ``` 結果：  缺點： parent1除了構造函數里面的內容，它原型鏈上的東西并未繼承，只是實現了部分繼承 代碼： ``` /* 將父級的構造函數this指向，指到子構造函數的實例上去，這樣在子類中就可以看到父類的屬性和方法 */ function Parent1() { this.name = 'parent1' } Parent1.prototype.say = function() {} // 不能被Child1繼承 function Child1() { Parent1.call(this) // 把父級parent1構造函數在子類的構造函數里面執行的話同時修改了父級構造函數的this指向，也就是指向了child1這個類實例化的對象的引用。說白了就是this指向從而導致父類執行的時候這個屬性都會掛在到child1這個類的實例上去 this.type = 'child1' } console.log(new Child1) ``` 結果：  2.原型鏈繼承 代碼 ``` /* prototype是自雷Child2的一個屬性，每個函數都是有這個屬性的，這個屬性是一個對象，對象是可以任意賦值的，接下來把Parent2的實例賦值給子類的prototype屬性，現在實例化了Child2，new Child2生成的是一個新的對象，這個對象上有一個.\_proto\_，這個屬性就等于Child2.prototype，所以就繼承成功了 */ function Parent2() { this.name = 'parent2' } function Child2() { this.type = 'child2' } Child2.prototype = new Parent2() console.log(new Child2) ``` 結果  new Child2().__proto__ === Child2.prototype，而Child2.prototype又等于父類的實例，所以可以成功繼承父類  缺點 ``` function Parent2() { this.name = 'parent2' this.play = [1,2,3] } function Child2() { this.type = 'child2' } Child2.prototype = new Parent2() var s1 = new Child2() var s2 = new Child2() console.log(s1.play, s2.play) // 沒毛病 s1.play.push(4) // 重新賦值 console.log(s1.play, s2.play) // 結果？都變化了，不是我們想要的，這兩個應該是隔離的 ``` 說明  3.組合方式 - 通用推薦 代碼： ``` /* 這種方式就可以把前面那兩種繼承方式的缺點彌補了 */ function Parent3() { this.name = 'parent3' this.play = [1,2,3] } function Child3() { Parent3.call(this) this.type = 'child3' } Child3.prototype = new Parent3() var s3 = new Child3() var s4 = new Child3() s3.play.push(4) console.log(s3.play, s4.play) // ?[1, 2, 3, 4],?[1, 2, 3]，互不影響 ``` 缺點 ``` // 父類執行了兩遍，性能不優 Parent3.call(this) // 執行了一遍 Child3.prototype = new Parent3() // 也執行了一遍 ``` 改進 ``` function Parent3() { this.name = 'parent3' this.play = [1,2,3] } function Child3() { Parent3.call(this) this.type = 'child3' } Child3.prototype = Parent3.prototype // 優化 var s3 = new Child3() var s4 = new Child3() s3.play.push(4) console.log(s3.play, s4.play) // ?[1, 2, 3, 4],?[1, 2, 3]，互不影響 構造函數體內，通過兩個函數組合，能拿到所有的，構造函數的屬性和方法，既然是想繼承父類的原型對象，所以直接賦值給當前的原型對象就行了，這樣就可以把父類函數里的屬性和方法拿到包括原型對象，這樣就可以實現繼承了。 這個時候就只實例化一次了只有Parent3.call(this)這個時候父類執行一次，原型對象上只是一個簡單的引用，，JS的數據類型只有值類型和引用類型，Child3.prototype = Parent3.prototype 這里都是對象肯定都是引用類型，所以這塊不會再執行父類的構造函數，這是它的一個優點。 ```