JavaScript中解析super关键字

最新推荐文章于 2024-07-16 16:32:07 发布

原创

最新推荐文章于 2024-07-16 16:32:07 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#多态 #java #react #面向对象编程 #javascript

本文详细探讨了JavaScript中`super`关键字的用法，包括作为函数调用时在子类构造器中的必要性，以及作为对象使用时如何访问父类原型的方法和属性。`super`在普通方法和静态方法中的行为差异以及在覆盖父类属性和方法时的应用。通过实例解析了`super`的使用规则和注意事项，对于理解和运用面向对象编程中的`super`关键字具有指导意义。

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

在写React中,用类class声明的组件,常常看到,React 组件内数据初始化往往放在constructor构造器函数里面,而子类继承React.Component,如果想要接收父组件的数据

那么必须要调用super(props),同时还需要让constructor构造器函数接收一个props参数,否则的话,在当前组件内是无法获取到外部组件传过来的值的

import React, { Component } from 'react'
import ReactDom from 'react-dom'


class Button extends Component {
  constructor(props) {
      super(props)
  }
  render() {
    const { content } = this.props;
    return (
      <div>
           <button>{content}</button>
      </div>
    )
  }
}

const container = document.getElementById('root');

ReactDOM.render(<Button content="按钮" />, container);

在 React 中你经常会看到上面的代码,如果一个组件需要定义自己的构造函数,那么就一定要调用super(props),也就是继承了React.Component构造函数

至于为什么要调用super(props)方法,因为 Es6 采用的是先创建父类实例的 this,然后在用子类的构造函数修改 this

如果没有constructor构造器函数,调用super(),以及参数props,它是会报错的

在组件实例被构造之后,该组件的所有成员函数都无法通过this.props访问到父组件传递过来的props值

下面一起来详细了解下super这个关键字

它不仅仅是一个关键字，还可以作为函数调用和对象使用

super作为函数调用

当super 作为函数调用时, 它代表的指向的是父类的构造函数,在子类的构造函数必须执行一次super函数

也就是说,在子类继承父类中，如果super作为函数调用，只能写在子类的构造函数(constructor)里面，super代表的是父类的构造函数

class A {          // class关键字声明了一个类A
  constructor() {
  }
}

class B extends A { // class关键字声明了类B继承自A类
  constructor() {   // constructor构造器函数
  &

最低0.47元/天解锁文章

JavaScript中解析super关键字

前言

1 条评论