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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
可以将word转成html的js代码
Apr 11 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php判断访问IP的方法
2015/06/19 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
js 居中漂浮广告
2010/03/21 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
flask应用部署到服务器的方法
2019/07/12 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
应届毕业生自荐书
2014/06/18 职场文书
物流专业求职信
2014/06/30 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS