快捷導(dǎo)航

js中ES6繼承和ES5繼承之間的差別

更新時(shí)間：2021年08月19日 10:46:45 作者：xing.org1^

這篇文章主要介紹了ES6繼承和ES5繼承，以及兩個(gè)繼承之間的差別，文中運(yùn)用示例以及代碼講解的非常清晰，感興趣的小伙伴可以參考一下

繼承方式

ES5 prototype 繼承

通過原型鏈（構(gòu)造函數(shù) + [[prototype]]）指向?qū)崿F(xiàn)繼承。（備注：后續(xù)__proto__我都會(huì)寫成[[prototype]]這種形式）
子類的 prototype 為父類對象的一個(gè)實(shí)例。因此子類的原型對象包含指向父類的原型對象的指針，父類的實(shí)例屬性為子類原型的屬性。

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

// 根據(jù)上一節(jié)原型鏈講到的知識(shí)點(diǎn)：實(shí)例化對象的__proto__等于構(gòu)造函數(shù)的prototype
SubType.prototype.__proto__ === SuperType.prototype // true

上邊的繼承關(guān)系如下圖：

內(nèi)部實(shí)現(xiàn)機(jī)制上，ES5 的繼承，實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對象this上，然后再將父類的方法添加到這個(gè)this上。類似使用：Father.apply(this)

ES6 class 繼承

通過class的extends + super實(shí)現(xiàn)繼承。
子類沒有自己的this對象，因此必須在 constructor 中通過 super 繼承父類的 this 對象，而后對此this對象進(jìn)行添加方法和屬性。
super關(guān)鍵字在構(gòu)造函數(shù)中表示父類的構(gòu)造函數(shù)，用來新建父類的 this 對象。
內(nèi)部實(shí)現(xiàn)機(jī)制上，ES6 的繼承機(jī)制完全不同，實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對象this---需要提前調(diào)用super方法，然后再用子類的構(gòu)造函數(shù)修改this指針。

super用法

super 可以作為函數(shù)和對象使用的。
當(dāng)作為函數(shù)使用的時(shí)候，只能在子類的構(gòu)造函數(shù)中使用----表示父類的構(gòu)造函數(shù)，但是 super 中的 this 指向的是子類的實(shí)例，因此在子類中super()表示的是 Father.prototype.constructor.call(this)。
當(dāng)作為對象使用的時(shí)候，super表示父類的原型對象，即表示 Father.prototype

二者區(qū)別

答：不是完全一樣的，主要有以下幾個(gè)差異點(diǎn)：

寫法不一樣。class的繼承通過extends關(guān)鍵字和super函數(shù)、super方法繼承。（關(guān)于super實(shí)現(xiàn)繼承的使用方式，具體我就不展開了）
類內(nèi)部定義的方法都是不可枚舉的，這個(gè) ES5 不一樣
類不存在變量提升，這一點(diǎn)與 ES5 完全不同
類相當(dāng)于實(shí)例的原型，所有在類中定義的方法都會(huì)被實(shí)例繼承。如果在一個(gè)方法前，加上 static 關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過類來調(diào)用，這就成為靜態(tài)方法
內(nèi)部實(shí)現(xiàn)機(jī)制不一樣。

ES5 prototype 繼承內(nèi)部實(shí)現(xiàn)方式

ES5的繼承，實(shí)質(zhì)上是先創(chuàng)造子類的實(shí)例對象this，然后再將父類的方法添加到子類（this）上面---Father.apply(this)。

ES6 class 繼承內(nèi)部實(shí)現(xiàn)方式

ES6的繼承機(jī)制完全不同，實(shí)質(zhì)上是先創(chuàng)造父類的實(shí)例對象this，并將父類的屬性和方法放到this上（前提是通過super函數(shù)調(diào)用），然后再用子類的構(gòu)造函數(shù)修改this。

因?yàn)閷?shí)現(xiàn)機(jī)制不同，導(dǎo)致這兩種繼承在繼承原生構(gòu)造函數(shù)時(shí)有些差異：

es5的寫法不能繼承原生構(gòu)造函數(shù)（比如Array、Number等）
因?yàn)閑s5的繼承是先創(chuàng)造子類的實(shí)例對象this，再將父類原型的屬性和方法重寫到子類上，因?yàn)闆]法訪問父類的內(nèi)部屬性，導(dǎo)致es5的繼承方式無法繼原生的構(gòu)造函數(shù)。
es6允許繼承構(gòu)造函數(shù)生成子類。因?yàn)閑s6是先創(chuàng)建父類的實(shí)例對象this，然后再用子類的構(gòu)造函數(shù)修飾，所以子類就可以繼承父類的所有屬性和方法。因此class可以繼承并自定義原生構(gòu)造函數(shù)的子類。extends不僅可以用來繼承類，還能用來繼承原生構(gòu)造函數(shù)，因此也就可以在原生數(shù)據(jù)結(jié)構(gòu)的基礎(chǔ)上，構(gòu)造自定義的數(shù)據(jù)結(jié)構(gòu)。