ES6繼承和ES5繼承是完全一樣的麼?

xing.org1^發表於2021-08-17

繼承方式

ES5 prototype 繼承

通過原型鏈(建構函式 + [[prototype]])指向實現繼承。 (備註:後續__proto__我都會寫成[[prototype]]這種形式)
子類的 prototype 為父類物件的一個例項。因此子類的原型物件包含指向父類的原型物件的指標,父類的例項屬性為子類原型的屬性。

// 父類:function SuperType;子類:function SubType;
SubType.prototype = new SuperType(); // SubType 繼承 SuperType

// 根據上一節原型鏈講到的知識點:例項化物件的__proto__等於建構函式的prototype
SubType.prototype.__proto__ === SuperType.prototype // true

上邊的繼承關係如下圖:

內部實現機制上,ES5 的繼承,實質是先創造子類的例項物件this上,然後再將父類的方法新增到這個this上。類似使用:Father.apply(this)

ES6 class 繼承

通過class的extends + super實現繼承。
子類沒有自己的this物件,因此必須在 constructor 中通過 super 繼承父類的 this 物件,而後對此this物件進行新增方法和屬性。
super關鍵字在建構函式中表示父類的建構函式,用來新建父類的 this 物件。
內部實現機制上,ES6 的繼承機制完全不同,實質是先創造父類的例項物件this---需要提前呼叫super方法,然後再用子類的建構函式修改this指標。

super用法

super 可以作為函式和物件使用的。
當作為函式使用的時候,只能在子類的建構函式中使用----表示父類的建構函式,但是 super 中的 this 指向的是子類的例項,因此在子類中super()表示的是 Father.prototype.constructor.call(this)。
當作為物件使用的時候,super表示父類的原型物件,即表示 Father.prototype

二者區別

答:不是完全一樣的,主要有以下幾個差異點

  1. 寫法不一樣。class的繼承通過extends關鍵字和super函式、super方法繼承。(關於super實現繼承的使用方式,具體我就不展開了)
  2. 類內部定義的方法都是不可列舉的,這個 ES5 不一樣
  3. 類不存在變數提升,這一點與 ES5 完全不同
  4. 類相當於例項的原型,所有在類中定義的方法都會被例項繼承。如果在一個方法前,加上 static 關鍵字,就表示該方法不會被例項繼承,而是直接通過類來呼叫,這就成為靜態方法
  5. 內部實現機制不一樣。

ES5 prototype 繼承 內部實現方式

ES5的繼承,實質上是先創造子類的例項物件this,然後再將父類的方法新增到子類(this)上面---Father.apply(this)。

ES6 class 繼承 內部實現方式

ES6的繼承機制完全不同,實質上是先創造父類的例項物件this,並將父類的屬性和方法放到this上(前提是通過super函式呼叫),然後再用子類的建構函式修改this。

因為實現機制不同,導致這兩種繼承在繼承原生建構函式時有些差異:

es5的寫法不能繼承原生建構函式(比如Array、Number等)
因為es5的繼承是先創造子類的例項物件this,再將父類原型的屬性和方法重寫到子類上,因為沒法訪問父類的內部屬性,導致es5的繼承方式無法繼原生的建構函式
es6允許繼承建構函式生成子類。因為es6是先建立父類的例項物件this,然後再用子類的建構函式修飾,所以子類就可以繼承父類的所有屬性和方法。因此class可以繼承並自定義原生建構函式的子類。extends不僅可以用來繼承類,還能用來繼承原生建構函式,因此也就可以在原生資料結構的基礎上,構造自定義的資料結構。

擴充套件

關於內部實現機制的說明,可以參考《阮一峰的es6文件-class的繼承》相關部分

文中有不妥之處歡迎留言討論,更多【每日一題】盡在公眾號 【前端印記】

相關文章