ES6 class inheritance

class inheritance

Class can extendsimplement inheritance through keywords. This ES5 implementation of inheritance by modifying prototypes is much clearer and more convenient.

class Point{
    
}

class ColorPoint extends Point{
    
}

The above code defines a class that inherits all the properties and methods of the ColorPointclass through extendskeywords . PointBut since no code is deployed, the two classes are exactly the same, which is a duplicate of one Pointclass. Below, we ColorPointadd code inside.

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

In the above code, the keyword appears in both the constructormethod and the method, which represents the constructor of the parent class, which is used to create an object of the parent class.toStringsuperthis

The subclass must constructorcall the method in the supermethod, otherwise an error will be reported when creating an instance. This is because the thisobject of the subclass must first be shaped by the constructor of the parent class to obtain the same instance attributes and methods as the parent class, and then process it, plus the instance attributes and methods of the subclass itself, if Without calling superthe method, subclasses don't get the thisobject.

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor() {
  }
}

let cp = new ColorPoint(); // ReferenceError

In the above code, ColorPointthe parent class is inherited Point, but its constructor does not call the supermethod, resulting in an error when creating a new instance.

The essence of ES5 inheritance is to first create an instance object of the subclass this, and then add the method of the parent class to thisit (Parent.apply(this)). The inheritance mechanism of ES6 is completely different. The essence is to first create an instance object of the parent class this(so the method must be called first super), and then use the constructor of the subclass to modify it this.

If the subclass does not define a constructormethod, this method will be added by default, the code is as follows. That is, any subclass has constructormethods, whether explicitly defined or not.

class ColorPoint extends Point{

}

//等同于
class ColorPoint extends Point{
    constructor(...args){
        super(...args)
    }
}

Another point to note is that in the constructor of the subclass, the keyword supercan only be used after the call this, otherwise an error will be reported. This is because the construction of an instance of a subclass is an opportunity to process an instance of the parent class, and only supermethods can return an instance of the parent class.

class Point{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
}

class ColorPoint extends Point{
    constructor(x,y,color){
        this.color = color; //referenceError
        super(x,y);
        this.color= color; //正确
    }
}

In the above code, the keyword is used before the method of the subclass is constructorcalled , and the result is an error, but it is correct after the method.superthissuper

Below is the code to generate an instance of the subclass.

let cp = new ColorPoint(25,8,'green');

cp instanceof  ColorPoint //true
cp instanceof  Point      //true

In the above code, the instance object cpis an instance ColorPointof Pointboth classes at the same time, which is exactly the same as ES5 behavior.

Finally, the static methods of the parent class are also inherited.

class A {
    static hello(){
        console.log('hello worle');
    }
}

class B extends A {}

B.hello() //hello

The above code hello()is Athe static method, Binherited A, also inherited the Astatic method.

ES6 class inheritance

class inheritance

Guess you like