ES6 class類鏈式繼承，實例化及react super(props)原理詳解

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

這篇文章主要介紹了ES6 class類鏈式繼承，實例化及react super(props)原理,結合實例形式詳細分析了ES6 中class類鏈式繼承，實例化及react super(props)原理相關概念、原理、定義與使用技巧,需要的朋友可以參考下

本文實例講述了ES6 class類鏈式繼承，實例化及react super(props)原理。分享給大家供大家參考，具體如下：

class定義類是es6提供的新的api，比較直觀，class類繼承也有著一定的規(guī)律性，在egg, webpack等庫的源碼中有著很多的應用場景。結合一些初學者可能遇到的難點，本文主要對其鏈式繼承進行總結，關于super關鍵字的使用請參考我的其他文章es6中super關鍵字的理解。

class定義

class App {
  constructor(options){
    super() //報錯
    //console.log(options)
  }
}
 
class AppChild extends App{
  getConfig(){
    console.log('獲取config')
  }
}

class定義類時，constructor不是必須的，可以省略

直接定義類時，不能再constructor中使用super()

class 鏈式繼承

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

在對類進行實例化時，會逐級執(zhí)行每個類的的constructor，如果類沒有constructor，會去查找繼承的類，在上層類實例化完畢之后（直到最頂層），再返回執(zhí)行類的實例化。

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

所以上面的代碼在最上層的類也能獲取到傳入的參數(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提供的關鍵字，用來繼承的，具體用法參見：es6中super關鍵字的理解

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

簡單的說，super()是父級類實例化的入口

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

class Component{
  constructor(options){
    console.log(options)
    //這里的this指的是實例化時入口類對應的實例
    //在用app進行實例化時，這里的this指的是App實例
    this.props = options
  }
}
 
class App extends Component{
  constructor(props){
    super(props)//去執(zhí)行父級類的實例化
    console.log(this.props)
  }
  componentDidMount() {
    //...
  }
}
 
 
new App({name:'ceshi'})

實例化時，執(zhí)行到super(props)，去實例化Componet, 給this.props賦值，注意這時這里的this指的是App對應的實例，并不是Component，這是一個關鍵點。

當Component實例化后，再執(zhí)行console.log(this.props)，當然可以獲取到值。