Inheritance in a class depends on two things:

  • extends
  • super

And the effect of this inheritance is the same as that of parasitic combination inheritance.

Inheritance rules

class Parent {}class Child extends Parent {}Copy the code

The above code defines a Child class that inherits all the properties and methods of the Parent class through the extends keyword. But since no code is deployed, the two classes are exactly the same, duplicating a Point class.

If you want to add attributes and methods to a subclass, you can:

class Parent {
    constructor(name, sex) {
        this.name = name
        this.sex = sex
    }
    sing() {
        console.log(this.sex); }}class Child extends Parent {
    constructor(name, sex, num) {
        super(name, sex)  // Call parent constructor(x, y)
        this.num = num
    }
    song() {
        console.log(this.name); }}Copy the code

constructor

Subclasses must be inconstructorMethod callsupermethods

  • Subclasses must be inconstructorMethod callsuperMethod, or an error will be reported when creating a new instance. This is because subclasses themselvesthisObject must be molded by the constructor of the parent class to get the same instance properties and methods as the parent class, and then processed to add its own instance properties and methods. If you don’t callsuperMethod, subclasses don’t get itthisObject.
class Parent { / *... * / }
​
class Child extends Point {
  constructor(){}}let cp = new Child(); // ReferenceError
Copy the code
  • For the above reasons, the super method in the constructor method must be defined before this object can be called.
class Parent {
    constructor(){}}class Child extends Parent {
    constructor() {
        this.num = 10/ / an error
        super(a)this.num = 10// Write it correctly}}Copy the code
  • If the subclass is not definedconstructorMethod, which is added by default
class Child extends Parent {}/ / is equivalent to
class Child extends Parent {
  constructor(. args) {
    super(...args);
  }
}
Copy the code

super

  • superThis keyword can be used as either a function or an object. In both cases, it’s used quite differently.

Super function

  • superWhen called as a function, represents the constructor of the parent class. ES6 requires that the constructor of a subclass must be executed oncesuperFunction.
  • If there is no definition in a subclassconstructorMethod, which is added by default and is equivalent to having executed the super function once.
  • superAlthough it represents the parent classAConstructor of, but returns a subclassBInstance of, i.esuperThe inside of thethisRefers to theBFor instance, thereforesuper()This is equivalent toA.prototype.constructor.call(this).
  • As a function,super()Can only be used in the constructor of a subclass, otherwise an error will be reported.

Super object

  • superAs an object, in a normal method, a prototype object that points to the parent class; In static methods, point to the parent class.
class A {
  p() {
    return 2; }}class B extends A {
  constructor() {
    super(a);console.log(super.p()); / / 2}}let b = new B();
Copy the code

In the code above, super.p() in subclass B uses super as an object. In this case, super refers to a.prototype in normal methods, so super.p() equals a.prototype.p ().

  • Due to thesuperA prototype object that points to a parent class, so methods or properties defined on an instance of the parent class, will not passsuperThe call.
class Parent {
    constructor(name, sex) {
        this.name = name
        this.sex = sex
    }
    sing() {
        console.log(this.sex); }}class Child extends Parent {
    song() {
        super.sing();
    }
    tell() {
        console.log(super.name); }}let xx = new Child('xx'.'boy')
​
xx.song()  //boy
xx.tell()  //undefined
Copy the code

  • Super can be fetched if the property is defined on a stereotype object of the parent class.

  • ES6 states that when a method of a parent class is called through super in a subclass normal method, this inside the method refers to the current subclass instance. Since this refers to the subclass instance, if you assign a value to a property via super, which is this, the assigned property becomes the property of the subclass instance.

  • If super is used as an object in a static method, then super refers to the parent class, not the parent class’s prototype object.

  • When a method of a parent class is called through super in a static method of a subclass, the this inside the method refers to the current subclass, not the instance of the subclass.

  • Note that when you use super, you must explicitly specify whether to use it as a function or as an object, otherwise an error will be reported.

    class A {}
​
class B extends A {
  constructor() {
    super(a);console.log(super); / / an error}}Copy the code

    In the code above, the super in console.log(super) is not clear if it is used as a function or as an object, so the JavaScript engine will report an error when parsing the code. At this point, if the data type of super is clearly stated, no errors will be reported.

conclusion

Inheritance in ES6:

  • Mainly depend onextendsKeyword to implement inheritance, and the effect of inheritance is similar toParasitic combinatorial inheritance
  • Using theextendsImplementing inheritance doesn’t have to beconstructorandsuperBecause they are not generated and called by default
  • extendsThe next goal doesn’t have to beclassAs long as there is aprototypeProperty function will do

Super related:

  • When implementing inheritance, if a subclass hasconstructorThe function has to be inconstructorCall thesuperFunction, because that’s what it’s used forthis.
  • superThere are two ways to call: as a function and as an object.
  • superWhen the function is called, it represents the constructor of the parent class and returns an instance of the subclasssuperThe inside of thethisPoint to subclasses. In a subclassconstructorIn thesuper()Is equivalent toParent.constructor.call(this).
  • superWhen called by an object, in a normal functionsuperObject refers to the prototype object of the parent class. Static functions refer to the parent class. And through thesuperWhen a method of a parent class is called,superIt will bind subclassesthisIs equivalent toParent.prototype.fn.call(this).

# 💦【 why not three times 】 Finish this 48 questions thoroughly understand JS inheritance (1.7W words with a touch of light)

# Class inheritance