ES6 class类链式继承,实例化及react super(props)原理详解


Posted in Javascript onFebruary 15, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
BootStrap 导航条实例代码
May 18 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 #Javascript
es6 super关键字的理解与应用实例分析
Feb 15 #Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 #Javascript
Vue父子传递实例讲解
Feb 14 #Javascript
Javascript操作select控件代码实例
Feb 14 #Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 #Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python简单区块链模拟详解
2019/07/03 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python中对_init_的理解及实例解析
2019/10/11 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
青蓝工程实施方案
2014/03/27 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers