欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年08月19日 10:46:45   作者:xing.org1^  
這篇文章主要介紹了ES6繼承和ES5繼承,以及兩個繼承之間的差別,文中運用示例以及代碼講解的非常清晰,感興趣的小伙伴可以參考一下

繼承方式

ES5 prototype 繼承

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

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

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

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

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

ES6 class 繼承

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

super用法

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

二者區(qū)別

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

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

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

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

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

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

因為實現(xiàn)機制不同,導(dǎo)致這兩種繼承在繼承原生構(gòu)造函數(shù)時有些差異:

es5的寫法不能繼承原生構(gòu)造函數(shù)(比如Array、Number等)
因為es5的繼承是先創(chuàng)造子類的實例對象this,再將父類原型的屬性和方法重寫到子類上,因為沒法訪問父類的內(nèi)部屬性,導(dǎo)致es5的繼承方式無法繼原生的構(gòu)造函數(shù)。
es6允許繼承構(gòu)造函數(shù)生成子類。因為es6是先創(chuàng)建父類的實例對象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)。

擴展

關(guān)于內(nèi)部實現(xiàn)機制的說明,可以參考《阮一峰的es6文檔-class的繼承》相關(guān)部分

到此這篇關(guān)于java中ES6繼承和ES5繼承之間的差別的文章就介紹到這了,更多相關(guān)ES6繼承和ES5繼承的差別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 跨端開發(fā)框架avm組件封裝經(jīng)驗分享

    跨端開發(fā)框架avm組件封裝經(jīng)驗分享

    這篇文章主要為大家介紹了跨端開發(fā)框架avm組件封裝的經(jīng)驗分享,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • Umi4集成阿里低代碼框架lowcode-engine實現(xiàn)

    Umi4集成阿里低代碼框架lowcode-engine實現(xiàn)

    這篇文章主要為大家介紹了Umi4集成阿里低代碼框架lowcode-engine實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • 微信小程序 animation API詳解及實例代碼

    微信小程序 animation API詳解及實例代碼

    這篇文章主要介紹了 微信小程序 animation API詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • 前端通過JavaScript創(chuàng)建修改CAD圖形詳情

    前端通過JavaScript創(chuàng)建修改CAD圖形詳情

    這篇文章介紹JavaScript創(chuàng)建修改CAD圖形,創(chuàng)建修改CAD圖形,一般是基于AutoCAD進行二次開發(fā),ObjectARX是AutoDesk公司針對AutoCAD平臺上的二次開發(fā)而推出的一個開發(fā)軟件包,它提供了以C++為基礎(chǔ)的面向?qū)ο蟮拈_發(fā)環(huán)境及應(yīng)用程序接口,能真正快速的訪問AutoCAD圖形數(shù)據(jù)庫
    2021-10-10
  • 使用javascript解析二維碼的三種方式

    使用javascript解析二維碼的三種方式

    這篇文章主要給大家分享使用javascript解析二維碼的三種方式,二維碼就是將我們能看懂的文字語言,以機器語言的形式存儲了起來。其中黑色小方塊代表的是1,白色小方塊代表的是0,黑白相間的圖案其實就是一串編碼,掃碼的過程就是翻譯這些編碼的過程,需要的朋友可以參考一下
    2021-11-11
  • 微信小程序 progress組件詳解及實例代碼

    微信小程序 progress組件詳解及實例代碼

    這篇文章主要介紹了微信小程序 progress組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • 詳解微信小程序 通過控制CSS實現(xiàn)view隱藏與顯示

    詳解微信小程序 通過控制CSS實現(xiàn)view隱藏與顯示

    這篇文章主要介紹了微信小程序 通過控制CSS實現(xiàn)view隱藏與顯示的相關(guān)資料,需要的朋友可以參考下
    2017-05-05
  • 前端工程化cjs?umd?esm?打包差異詳解

    前端工程化cjs?umd?esm?打包差異詳解

    這篇文章主要為大家介紹了前端工程化cjs?umd?esm?打包差異詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • 17個JavaScript?單行程序

    17個JavaScript?單行程序

    這篇文章主要介紹了17個JavaScript?單行程序?,在?JavaScript?代碼的世界里,在保證代碼易讀性的前提下更少等于更好,下面文章將為大家分享17?個?JavaScript?單行程序代碼,希望能幫助到大家
    2021-12-12
  • 微信小程序 網(wǎng)絡(luò)請求(post請求,get請求)

    微信小程序 網(wǎng)絡(luò)請求(post請求,get請求)

    這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請求(post請求,get請求)的相關(guān)資料,需要的朋友可以參考下
    2017-01-01

最新評論