一、ES6类

ES6中,通过extends关键字实现类的继承,方式如下:

class sup {
constructor(name) {
this.name = name
} printName() {
console.log(this.name)
}
} class sub extends sup{
constructor(name,age) {
super(name) // super代表的事父类的构造函数
this.age = age
} printAge() {
console.log(this.age)
}
} let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20

在上面的例子中,可以看到通过super关键字实现调用父类,super代替的是父类的构建函数,使用super(name)相当于调用sup.prototype.constructor.call(this,name)

如果在子类中不使用super,关键字,则会引发报错,如下:

报错的原因是 子类是没有自己的this对象的,它只能继承父类的this对象,然后对其进行加工

super()就是将父类中的this对象继承给子类的,没有super()子类就得不到this对象

如果先调用this,再初始化super(),同样是禁止的行为

class sub extends sup{
constructor(name,age) {
this.age = age
super(name) // super代表的事父类的构造函数
}
}

所以在子类constructor中,必须先调用super才能引用this

二、类组件

React中,类组件是基于es6的规范实现的,继承React.Component,因此如果用到constructor就必须写super()才初始化this

这时候,在调用super()的时候,我们一般都需要传入props作为参数,如果不传进去,React内部也会将其定义在组件实例中

// React 内部
const instance = new YourComponent(props);
instance.props = props;

所以无论有没有constructor,在renderthis.props都是可以使用的,这是React自动附带的,是可以不写的:

class HelloMessage extends React.Component{
render (){
return (
<div>nice to meet you! {this.props.name}</div>
);
}
}

但是也不建议使用super()代替super(props)

因为在React会在类组件构造函数生成实例后再给this.props赋值,所以在不传递propssuper的情况下,调用this.propsundefined,如下情况:

class Button extends React.Component {
constructor(props) {
super(); // 没传入 props
console.log(props); // {}
console.log(this.props); // undefined
// ...
}

而传入props的则都能正常访问,确保了 this.props 在构造函数执行完毕之前已被赋值,更符合逻辑,如下:

class Button extends React.Component {
constructor(props) {
super(props); // 没传入 props
console.log(props); // {}
console.log(this.props); // {}
// ...
}

三、总结

React中,类组件基于ES6,所以在constructor中必须使用super

在调用super过程,无论是否传入propsReact内部都会将porps赋值给组件实例porps属性中

如果只调用了super(),那么this.propssuper()和构造函数结束之间仍是undefined

super()和super(props)的更多相关文章

  1. react super() and super(props)

    subclass: subclass is a class that extends another class. 即子类. In ES2015, to use 'this' in subclasse ...

  2. react super中的props

    有的小伙伴每次写组件都会习惯性在constructor和super中写上props,那么这个是必要的吗?? 首先要明确很重要的一点就是: 可以不写constructor,一旦写了constructor ...

  3. 巩固java(四)----super和super()

    引言: 一个公司里有普通员工和经理,他们之间有很多共同点,但也有一些差异,比如薪水问题,普通员工只有普通工资,经理在完成绩效后有一定比例的奖金.这时我们可以定义两个类Employee和Manager, ...

  4. Java学习——this、this()、super 和 super()的使用

    编写程序:说明 this.super 和 super()的用法.程序首先定义 Point(点)类,然后创建点的子类 Line(线)),最后通过 LX7_3 类输出线段的长度. package Pack ...

  5. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  6. Python’s super() considered super!

    如果你没有被Python的super()惊愕过,那么要么是你不了解它的威力,要么就是你不知道如何高效地使用它. 有许多介绍super()的文章,这一篇与其它文章的不同之处在于: 提供了实例 阐述了它的 ...

  7. super 多重继承 super() function with multilevel inheritance

    Python | super() function with multilevel inheritance - GeeksforGeeks https://www.geeksforgeeks.org/ ...

  8. 如何理解react中的super() super(props)

    class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...

  9. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  10. class实现React继承以及constructor的super的问题

    看这篇文章之前 建议先看看阮一峰 的Class继承 便于更好的理解 首先要知道一个问题 React的父子组件和组件类的继承有什么关系?答案是:没有关系 父子组件:指的得是组件标签包含关系 父子组件通过 ...

随机推荐

  1. [VueJsDev] 日志 - 更新日志

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html 更新日志 ::: details 目录 目录 更新日志 Lo ...

  2. 提升地理空间分析效率,火山引擎ByteHouse上线GIS能力

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在数字化时代,地理空间分析(Geospatial Analytics)成为辅助企业市场策略洞察的重要手段.无论是广 ...

  3. 可穿戴设备主控制器芯片AMA3B 源码解析之初体验

    一 背景和缘由   现在的mcu非常多,在超低功耗mcu这块,能赢得市场穿戴式设备使用的产品的确不多,以前是的是stm32 L系列,可是,随着L系列的缺货涨价和技术指标没有快速的发展,很多厂商都抛弃了 ...

  4. Django使用Bootstrap的经典方法

    前面的话 Bootstrap是简单.灵活的用于搭建WEB页面的HTML.CSS.Javascript的工具集.Bootstrap基于HTML5和CSS3,具有漂亮的设计.友好的学习曲线.卓越的兼容性, ...

  5. 文件的特殊权限:SUID,SGID,SBIT

    文件的特殊权限:SUID,SGID,SBIT Set UID SUID权限只用于二进制文件 运行者必须有X权限 运行者在程序运行过程(run-time)中具有二进制文件拥有者(owner)的权限 例子 ...

  6. PAT甲级【1014 Waiting in Line】

    考察双向链表 import java.io.IOException; import java.io.InputStreamReader; import java.io.StreamTokenizer; ...

  7. Java课堂

    import java.awt.*; import java.awt.event.*; import java.util.*; public class Main{ public static dou ...

  8. 引领汽车营销新趋势,3DCAT实时云渲染助力汽车三维可视化

    当前,汽车产业发展正从电动化的上半场,向智能化的下半场迈进.除了车机技术体验的智能化之外,观车体验的智能化也不容忽视. 这是因为,随着数字化.智能化.个性化的趋势,消费者对汽车的需求和期待也越来越高, ...

  9. 记录--JS原型链

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 引子 对于初学者学习原型链,还是有很大的困难.一方面是函数与对象分不太清楚:另一方面,不懂原型链的继承等.本人曾今也深受困惑,并且把疑惑的 ...

  10. Ubuntu安装OpenOffice

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/quantum7/article/det ...