Вопрос о ключевом слове super?

Question

[ArturPetrov]

Как говорит документация:
Ключевое слово super используется для вызова функций, принадлежащих родителю объекта.
Часто встречаю особенно в React коде super в конструкторах. Хотя вот в js редко встречалось мне это слово. Почему так? Почему в js часто конструктор без него, а в React он повсюду там где есть конструктор?

И еще вопрос вот есть пример кода где по нажатии на кнопку открывается новое окошко. Какую функцию здесь вызывает super? Какой здесь родитель которому предналежит функция и какой обьект(ребенок)? И что было бы, если бы не было super? ну то есть я понимаю что ошибка была бы, но если бы его не было как по другому пришлось бы написать код?

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
  }

  toggle() {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;

ссылка на источник кода:
reactstrap.github.io/components/collapse

Answer 1

[Петр Мухуров]

super(props) используется для того, чтобы вызвать метод constructor(props) у React.Component, мы же пишем extends, грубо говоря, под капотом

class Component {
  constructor(props) {
    this.props = props;
  }
}

а без конструктора это выглядит так

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  state = {
    collapse: false
  };

  toggle = () => {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;

Answer 2

[Антон Спирин]

Объявление:
class Example extends Component { ... }
Определяет класс Example который наследуется от Compоnent.

super(props);
Вызов конструктора Component с передачей первым аргументом объекта props.

Comments

[ArturPetrov]

тоесть если сравнить код который я написал в этой теме, с кодом из учебника:

class User {                                            
    constructor (argname,argage) {
        this.name = argname;
        this.age = argage;
        }
    sayHi() {
        alert("Меня зовут: " + this.name);  
        alert("Мой возраст: " + this.age);
    }
} 

var vasya = new User("Вася", 25);
vasya.sayHi(name);

super(props);
это аналогvasya.sayHi(name); ?
или:
vasya.sayHi(argname);
Или не то и не другое?

[Петр Мухуров]

ArturPetrov, нет

class User {                                            
    constructor (argname,argage) {
        this.name = argname;
        this.age = argage;
        }
    sayHi() {
        alert("Меня зовут: " + this.name);  
        alert("Мой возраст: " + this.age);
    }
}

class SuperUser extends User {
  constructor(argname,argage) {
    super(argname, argage);

    this.superAge = argage + 100;
  }
}

здесь
super(argname, argage);
аналогичен
User.constructor(argname, argage);

[ArturPetrov]

Петр Мухуров, Спасибо большое!

Answer 3

[Дмитрий]

Можно еще почитать про super применительно к React здесь: https://overreacted.io/why-do-we-write-super-props/