本文實(shí)例講述了ES6 class類鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理。分享給大家供大家參考，具體如下：

class定義類是es6提供的新的api，比較直觀，class類繼承也有著一定的規(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定義類時(shí)，constructor不是必須的，可以省略

直接定義類時(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ì)類進(jìn)行實(shí)例化時(shí)，會(huì)逐級(jí)執(zhí)行每個(gè)類的的constructor，如果類沒有constructor，會(huì)去查找繼承的類，在上層類實(shí)例化完畢之后（直到最頂層），再返回執(zhí)行類的實(shí)例化。

看到這里是不是想起什么，是不是很像一些中間件的執(zhí)行過程，先進(jìn)入到最底層，執(zhí)行完后再返回。是的，class類實(shí)例化過程類似于洋蔥模型，先進(jìn)后出。

所以上面的代碼在最上層的類也能獲取到傳入的參數(shù)。

2，帶有super的類繼承

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'})

上面的代碼在中間類添加了super()，super是什么呢，es6提供的關(guān)鍵字，用來繼承的，具體用法參見：es6中super關(guān)鍵字的理解

加入super之后，最后頂層獲取的options就被super修改了。這是為什么呢，通過調(diào)試可以發(fā)現(xiàn)，super()執(zhí)行時(shí)，會(huì)去執(zhí)行其所繼承類的constructor，當(dāng)父級(jí)類完成初始化之后，才會(huì)去執(zhí)行super()之后的邏輯。

簡(jiǎn)單的說，super()是父級(jí)類實(shí)例化的入口

3，模擬實(shí)現(xiàn)react中class類，super(props)之后，可以使用this.props

class Component{  constructor(options){    console.log(options)    //這里的this指的是實(shí)例化時(shí)入口類對(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í)類的實(shí)例化    console.log(this.props)  }  componentDidMount() {    //...  }}  new App({name:'ceshi'})