聊聊曾經繼承那些坑

原型繼承和 Class 繼承

原型如何實作繼承？ Class 如何實作繼承？ Class 本質是什麼？

⾸先先來講下 class ，其實在 JS 中并不存在類， class 隻是文法糖，本質還是函數

原型

繼承得靠原型來實作，

其實原型的概念很簡單：

所有對象都有一個屬性

__proto__

指向一個對象，也就是原型

每個對象的原型都可以通過 constructor 找到構造函數，構造函數也可以通過 prototype 找到原型

所有函數都可以通過

__proto__

找到

Function

對象

所有對象都可以通過

__proto__

找到

Object

對象

對象之間通過

__proto__

連接配接起來，這樣稱之為原型鍊。目前對象上不存在的屬性可以通過原型鍊一層層往上查找，直到頂層

Object

對象

其實原型中最重要的内容就是這些了。

class Person {}
Person instanceof Function // true
           

組合繼承

組合繼承是最常⽤的繼承⽅式

function Parent(value) {
 this.val = value
}
Parent.prototype.getValue = function() {
 console.log(this.val) }
function Child(value) {
 Parent.call(this, value) }
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
           

以上繼承的⽅式核⼼是在⼦類的構造函數中通過 Parent.call(this) 繼承⽗類的屬性， 然後改變⼦類的原型為 new Parent() 來繼承⽗類的函數。 這種繼承⽅式優點在于構造函數可以傳參，不會與⽗類引⽤屬性共享，可以複⽤⽗類的函 數，但是也存在⼀個缺點就是在繼承⽗類函數的時候調⽤了⽗類構造函數，導緻⼦類的原 型上多了不需要的⽗類屬性，存在記憶體上的浪費。

寄⽣組合繼承

這種繼承⽅式對組合繼承進⾏了優化，組合繼承缺點在于繼承⽗類函數時調⽤ 了構造函數，我們隻需要優化掉這點就⾏了。

function Parent(value) {
 this.val = value
}
Parent.prototype.getValue = function() {
 console.log(this.val) }
function Child(value) {
 Parent.call(this, value) }
Child.prototype = Object.create(Parent.prototype, {
 constructor: {
 value: Child,
 enumerable: false,
 writable: true,
 configurable: true
 } })
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
           

以上繼承實作的核⼼就是将⽗類的原型指派給了⼦類，并且将構造函數設定為 ⼦類，這樣既解決了⽆⽤的⽗類屬性問題，還能正确的找到⼦類的構造函數。

Class 繼承

以上兩種繼承⽅式都是通過原型去解決的，在 ES6 中，我們可以使⽤ class 去 實作繼承，并且實作起來很簡單。

class Parent {
 constructor(value) {
 this.val = value
 }
 getValue() {
 console.log(this.val)
 } }
class Child extends Parent {
 constructor(value) {
 super(value)
 this.val = value
 } }
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
           

class 實作繼承的核⼼在于使⽤ extends 表明繼承⾃哪個⽗類，并且在⼦ 類構造函數中必須調⽤ super ，因為這段代碼可以看成

Parent.call(this, value) 。

每天一句中文式外語

泰語

警察署/sha-tan-ni-dan-luo沙潭尼丹摞/ Police Station

醫院/long-pa-ya-ban隆帕雅般/Hospital

洗手間/hong-nan哄南/Toilet/W.C

不要/mai-ao賣凹/Don’t/No

要/ao 凹/Need To

不是/mai-cai賣菜/an’t/No

是/cai菜/Is/Yes

不要怕/mai–dong-gua賣冬瓜/Be fearless of

别擔心!/mai-dong-huan 賣冬緩/ Care Nothing For!

兄|姐(泰國禮貌稱呼)/pi 屁/Elder brother|sister