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

江華網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),江華網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為江華數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的江華做網(wǎng)站的公司定做！

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

實(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類實(shí)例化時(shí)，對(duì)應(yīng)的this指向的是最外層類(入口類)對(duì)應(yīng)的實(shí)例

2，鏈?zhǔn)嚼^承對(duì)應(yīng)的實(shí)例化是洋蔥圈模型，先進(jìn)入到最底層類實(shí)例化，再返回

3，super是class類constructor對(duì)應(yīng)的入口，super(options)對(duì)應(yīng)的參數(shù)就是constructor對(duì)應(yīng)的參數(shù)

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。