欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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),當然可以獲取到值。

總結

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

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

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

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

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

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

相關文章

  • React router基礎使用方法詳解

    React router基礎使用方法詳解

    這篇文章主要介紹了React router基礎使用方法,React Router是React生態(tài)系統(tǒng)中最受歡迎的第三方庫之一,近一半的React項目中使用了React Router,下面就來看看如何在React項目中使用
    2023-04-04
  • 在react中使用highlight.js將頁面上的代碼高亮的方法

    在react中使用highlight.js將頁面上的代碼高亮的方法

    本文通過 highlight.js 庫實現(xiàn)對文章正文 HTML 中的代碼元素自動添加語法高亮,具有一定的參考價值,感興趣的可以了解一下
    2022-01-01
  • React添加或移除類的操作方法

    React添加或移除類的操作方法

    這篇文章主要介紹了React添加或移除類的操作方法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • 使用Node搭建reactSSR服務端渲染架構

    使用Node搭建reactSSR服務端渲染架構

    這篇文章主要介紹了使用Node搭建reactSSR服務端渲染架構,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • React Native之TextInput組件解析示例

    React Native之TextInput組件解析示例

    本篇文章主要介紹了React Native之TextInput組件解析示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • React將組件作為參數(shù)進行傳遞的3種方法實例

    React將組件作為參數(shù)進行傳遞的3種方法實例

    其實react組件之間傳遞參數(shù)是比較簡單的,組件傳入?yún)?shù)的一種方式,下面這篇文章主要給大家介紹了關于React將組件作為參數(shù)進行傳遞的3種方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • React中的useEffect(副作用)介紹

    React中的useEffect(副作用)介紹

    這篇文章主要介紹了React中的useEffect(副作用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React如何立即更新DOM

    React如何立即更新DOM

    這篇文章主要介紹了React如何立即更新DOM問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React 數(shù)據(jù)獲取條件競爭原理解析

    React 數(shù)據(jù)獲取條件競爭原理解析

    這篇文章主要為大家介紹了React 數(shù)據(jù)獲取條件競爭原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • 基于React封裝組件的實現(xiàn)步驟

    基于React封裝組件的實現(xiàn)步驟

    很多小伙伴在第一次嘗試封裝組件時會和我一樣碰到許多問題,本文主要介紹了基于React封裝組件的實現(xiàn)步驟,感興趣的可以了解一下
    2021-11-11

最新評論