JavaScript中解析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这个关键字

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

01

super作为函数调用

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

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

class A {          // class关键字声明了一个类A
  cons