Why does es6's class inheritance call super?

Reason: The derived constructor will not create a new this object, that is, the subclass does not have its own this; only the this object created by the base class (parent class) through super() Next, derive Classes can use this to generate object properties just like base classes.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

A key point is often mentioned when learning ES6 class inheritance

There are two requirements when a subclass SubClass inherits the constructor constructor of the parent class SuperClass:

• 1) Super() must be called in the constructor.

• 2) This must be written after super().

The first point is to resolve the ambiguity between the parent class and the subclass, and it is determined that

"The subclass does not have its own this”This concept

Subclass and parent class are relative concepts, because a class can be both a subclass and a parent class, so ES6 uses absolute concepts: base class and derived class. And this concept applies to all constructors. Constructors in JS are either basic or derived.

In ES6, the constructors (functions) we write casually are all base classes. The base class can directly use this to point to the object that calls its method.

We summed up this by saying: Whoever calls this, this will point to.

        function Super(name) {
            this.name = name；
            SuperFactory.prototype.sayHi = function () {
                console.log("Hi");
            }
        }
 
       let super = new Super("peter");//通过new创建了新的对象，Super()中的this即指向这个对象

The derived class in ES6 is the extend class. The derived constructor will not create a new <span style="background-color:#ffd900;">this</span> object <span style="background-color:#ffd900;"> (or this points to Object</span>(Here you can review what the new keyword does), which is the so-called "subclass does not have its own this".Only by <span style="background-color:#ffd900;">super()</span> after the this object created by the base class, the derived class can use this to generate like the base class The properties of the object.

 class SuperClass {                //基类 not父类
    constructor(name) {
        this.name = name;
        }
     sayHi() {
        console.log("Hi");
        }
    }；
 
class SubClass extends SuperClass {//派生类 not子类
    constructor(name，age) {
                surpe(name);
                this.age = age；
            }
    sayNo() {
        console.log("NO");
        }
    }；
        
let subinst = new subClass('tom',18);
subinst.sayHi();//Hi
subinst.sayNo();//NO

Then why this must be written after super()

is to avoid a code trap.

class Person {
  constructor(name) {
    this.name = name;
  }
}
 
class PolitePerson extends Person {
  constructor(name) {
    this.greetColleagues(); // 这里不允许我们使用this,下面解释
    super(name);
  }
  greetColleagues() {
    alert('Good morning folks!');
  }
}

The above example assumes that before super() is called This is allowed to be used. After a while, in order to meet some needs, we added in greetColleagues():

greetColleagues() {
    alert('Good morning folks!');
    alert('My name is ' + this.name + ', nice to meet you!');
  }

But we forgot that this.greetColleagues() did not exist at all before super() was called. Definition, the code will throw an error, and it may be difficult to think of when it happens in code like this.

Therefore, in order to avoid this trap, JavaScript enforces that before using this in the constructor, you must first Call super.

[Related recommendations: javascript video tutorial, programming video】

The above is the detailed content of Why does es6's class inheritance call super?. For more information, please follow other related articles on the PHP Chinese website!