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

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

class定義類是es6提供的新的api，比較直觀，class類繼承也有著一定的規律性，在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'})

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

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

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

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修改了。這是為什么呢，通過調試可以發現，super()執行時，會去執行其所繼承類的constructor，當父級類完成初始化之后，才會去執行super()之后的邏輯。

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

3，模擬實現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)//去執行父級類的實例化
    console.log(this.props)
  }
  componentDidMount() {
    //...
  }
}
 
 
new App({name:'ceshi'})

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

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

總結

1，class類實例化時，對應的this指向的是最外層類(入口類)對應的實例

2，鏈式繼承對應的實例化是洋蔥圈模型，先進入到最底層類實例化，再返回

3，super是class類constructor對應的入口，super(options)對應的參數就是constructor對應的參數

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

更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。