本文例項講述了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程式設計有所幫助。