Sorry for the pic in Japanese, but looks easy to understand.

When you use super function in your class member functions, extends keyword is also expected to be used. When you call super like super(args) in the extending class, it calls the constructor of the extended class. You can also call the other member functions of the extended class with super.methods(args), not super(args).

(From https://liginc.co.jp/266587)

UPDATE

FYI: What's the difference between "super()" and "super(props)" in React when using es6 classes? This discussion explains well about how super in react component affects this context constraint. Good to read.

Instead of super, you can use Object.getPrototypeOf twice: once to navigate from the instance to its internal prototype (which is Child.prototype), and once to navigate from that to its internal prototype (which is Parent.prototype):

class Parent {
    func() {
        console.log("string1");
    }
}

function boundFunc() {
    Object.getPrototypeOf(Object.getPrototypeOf(this)).func();
    console.log(this.string2);
}

class Child extends Parent {
    constructor() {
        super();
        this.string2 = "string2"
        this.func = boundFunc.bind(this);
    }
}

const child = new Child();
child.func();

If you use this, the engine will first try to access the property on the instance itself. If it doesn't exist on the instance, it'll then go to the prototype (Footballer.prototype). If it doesn't exist there, it'll then go to Human.prototype to see if the property exists.

If you use super, it'll immediately go to the parent class, Human.prototype, to see if the property exists, and will go upward from there (rather than go through the instance and child prototype first).

This will be especially important to keep in mind if a method with the same name exists both on the parent and child, which isn't uncommon.

class Human {
  mouse () {
    console.log('parent class');
  }
}

class Footballer extends Human {
  mouse() {
    console.log('child class');
  }
  talk () {
    super.mouse();
    this.mouse();
  }
}

const f = new Footballer();
f.talk();

The third approach is the standard way to achieve this. It is the functionally the same as the 2nd version. In calls of the form super[method](), the current object (this) is set as the context.

See MDN docs.

In ES6, derived classes have to call super() if they have a constructor. In react, all components extend from the Component class.

You don't actually need a constructor for every ES6/react class. If no custom constructor is defined, it will use the default constructor. For base classes, it is:

constructor() {}

And for derived classes, the default constructor is:

constructor(...args) {
  super(...args);
}

You also need to call super() before accessing this, since this is not initialized until super() is called.

There are a few reasons to use a custom constructor in react. One is that you can set the initial state within the constructor using this.state = ... instead of using the getInitialState lifecycle method.

You can also bind class methods inside the constructor with this.someClassMethod = this.someClassMethod.bind(this). It's actually better to bind methods in the constructor since they will only be created once. Otherwise if you call bind or use arrow functions to bind methods anywhere outside the constructor (like in the render method), it will actually end up creating a new instance of the function on every render. Read more about that here.

If you want to use this.props in the constructor, you need to call super with props as an argument:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}

If you don't, then this.props is undefined in the constructor. However, you can still access this.props anywhere else in the class outside the constructor without needing to do anything with it in the constructor.