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 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
js读取配置文件自写
Feb 11 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
基于JavaScript实现省市联动效果
Jun 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
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python实现简单多线程任务队列
2016/02/27 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python 多线程Threading初学教程
2017/08/22 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
对python 调用类属性的方法详解
2019/07/02 Python
python实现tail -f 功能
2020/01/17 Python
python能在浏览器能运行吗
2020/06/17 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
婚礼主持结束词
2014/03/13 职场文书
综合实践活动总结
2014/05/05 职场文书
群众路线剖析材料
2014/09/30 职场文书
转正申请报告格式
2015/05/15 职场文书