ES6 class類(lèi)鏈?zhǔn)嚼^承,實(shí)例化及react super(props)原理詳解
本文實(shí)例講述了ES6 class類(lèi)鏈?zhǔn)嚼^承,實(shí)例化及react super(props)原理。分享給大家供大家參考,具體如下:
class定義類(lèi)是es6提供的新的api,比較直觀(guān),class類(lèi)繼承也有著一定的規(guī)律性,在egg, webpack等庫(kù)的源碼中有著很多的應(yīng)用場(chǎng)景。結(jié)合一些初學(xué)者可能遇到的難點(diǎn),本文主要對(duì)其鏈?zhǔn)嚼^承進(jìn)行總結(jié),關(guān)于super關(guān)鍵字的使用請(qǐng)參考我的其他文章es6中super關(guān)鍵字的理解。
class定義
class App { constructor(options){ super() //報(bào)錯(cuò) //console.log(options) } } class AppChild extends App{ getConfig(){ console.log('獲取config') } }
class定義類(lèi)時(shí),constructor不是必須的,可以省略
直接定義類(lèi)時(shí),不能再constructor中使用super()
class 鏈?zhǔn)嚼^承
1,省略constructor:
class App { constructor(options){ console.log(options) } } class AppChild extends App{ getConfig(){ console.log('獲取config') } } class AppGrandson extends AppChild{ getTime(){ console.log('獲取config') } } new AppGrandson({name:'ceshi'})
在對(duì)類(lèi)進(jìn)行實(shí)例化時(shí),會(huì)逐級(jí)執(zhí)行每個(gè)類(lèi)的的constructor,如果類(lèi)沒(méi)有constructor,會(huì)去查找繼承的類(lèi),在上層類(lèi)實(shí)例化完畢之后(直到最頂層),再返回執(zhí)行類(lèi)的實(shí)例化。
看到這里是不是想起什么,是不是很像一些中間件的執(zhí)行過(guò)程,先進(jìn)入到最底層,執(zhí)行完后再返回。是的,class類(lèi)實(shí)例化過(guò)程類(lèi)似于洋蔥模型,先進(jìn)后出。
所以上面的代碼在最上層的類(lèi)也能獲取到傳入的參數(shù)。
2,帶有super的類(lèi)繼承
class App { constructor(options){ console.log(options) } } class AppChild extends App{ constructor(options){ super({ ...options, age:22 }) this.family = () => { return { familyName:'child' } } } getConfig(){ console.log('獲取config') } } class AppGrandson extends AppChild{ getTime(){ console.log('獲取config') } } new AppGrandson({name:'ceshi'})
上面的代碼在中間類(lèi)添加了super(),super是什么呢,es6提供的關(guān)鍵字,用來(lái)繼承的,具體用法參見(jiàn):es6中super關(guān)鍵字的理解
加入super之后,最后頂層獲取的options就被super修改了。這是為什么呢,通過(guò)調(diào)試可以發(fā)現(xiàn),super()執(zhí)行時(shí),會(huì)去執(zhí)行其所繼承類(lèi)的constructor,當(dāng)父級(jí)類(lèi)完成初始化之后,才會(huì)去執(zhí)行super()之后的邏輯。
簡(jiǎn)單的說(shuō),super()是父級(jí)類(lèi)實(shí)例化的入口
3,模擬實(shí)現(xiàn)react中class類(lèi),super(props)之后,可以使用this.props
class Component{ constructor(options){ console.log(options) //這里的this指的是實(shí)例化時(shí)入口類(lèi)對(duì)應(yīng)的實(shí)例 //在用app進(jìn)行實(shí)例化時(shí),這里的this指的是App實(shí)例 this.props = options } } class App extends Component{ constructor(props){ super(props)//去執(zhí)行父級(jí)類(lèi)的實(shí)例化 console.log(this.props) } componentDidMount() { //... } } new App({name:'ceshi'})
實(shí)例化時(shí),執(zhí)行到super(props),去實(shí)例化Componet, 給this.props賦值,注意這時(shí)這里的this指的是App對(duì)應(yīng)的實(shí)例,并不是Component,這是一個(gè)關(guān)鍵點(diǎn)。
當(dāng)Component實(shí)例化后,再執(zhí)行console.log(this.props),當(dāng)然可以獲取到值。
總結(jié)
1,class類(lèi)實(shí)例化時(shí),對(duì)應(yīng)的this指向的是最外層類(lèi)(入口類(lèi))對(duì)應(yīng)的實(shí)例
2,鏈?zhǔn)嚼^承對(duì)應(yīng)的實(shí)例化是洋蔥圈模型,先進(jìn)入到最底層類(lèi)實(shí)例化,再返回
3,super是class類(lèi)constructor對(duì)應(yīng)的入口,super(options)對(duì)應(yīng)的參數(shù)就是constructor對(duì)應(yīng)的參數(shù)
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
在react中使用highlight.js將頁(yè)面上的代碼高亮的方法
本文通過(guò) highlight.js 庫(kù)實(shí)現(xiàn)對(duì)文章正文 HTML 中的代碼元素自動(dòng)添加語(yǔ)法高亮,具有一定的參考價(jià)值,感興趣的可以了解一下2022-01-01使用Node搭建reactSSR服務(wù)端渲染架構(gòu)
這篇文章主要介紹了使用Node搭建reactSSR服務(wù)端渲染架構(gòu),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08React將組件作為參數(shù)進(jìn)行傳遞的3種方法實(shí)例
其實(shí)react組件之間傳遞參數(shù)是比較簡(jiǎn)單的,組件傳入?yún)?shù)的一種方式,下面這篇文章主要給大家介紹了關(guān)于React將組件作為參數(shù)進(jìn)行傳遞的3種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07React 數(shù)據(jù)獲取條件競(jìng)爭(zhēng)原理解析
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取條件競(jìng)爭(zhēng)原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01