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 相关文章推荐
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JS之相等操作符详解
Sep 13 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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 删除数组元素
2009/01/16 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python中的集合类型知识讲解
2015/08/19 Python
python+django快速实现文件上传
2016/10/24 Python
python 中的int()函数怎么用
2017/10/17 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
python中count函数简单的实例讲解
2020/02/06 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
志愿者活动总结范文
2014/04/26 职场文书
市场营销战略计划书
2014/05/06 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
公司外出活动方案
2014/08/14 职场文书
2015新年寄语大全
2014/12/08 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python面向对象之成员相关知识总结
2021/06/24 Python
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS