快捷導(dǎo)航

ES6 class類(lèi)鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理詳解

更新時(shí)間：2020年02月15日 11:52:24 作者：qdmoment

這篇文章主要介紹了ES6 class類(lèi)鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理,結(jié)合實(shí)例形式詳細(xì)分析了ES6 中class類(lèi)鏈?zhǔn)嚼^承，實(shí)例化及react super(props)原理相關(guān)概念、原理、定義與使用技巧,需要的朋友可以參考下

本文實(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)然可以獲取到值。