Js_ understand the role of constructor method and super in ES6 class

First of all, ES6 classis a kind of "syntactic sugar", so it is just written more elegantly, more like object-oriented programming, and its idea is consistent with ES5.

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

Point.prototype.toString = function() {
  return '(' + this.x + ',' + this.y + ')';
}

Equivalent to

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

  toString() {
    return '(' + this.x + ',' + this.y + ')';
  }
}

The constructormethod is the constructor of the class, which is a default method, which is newautomatically called when an object instance is created through the command. A class must have constructormethod, if not explicitly defined, a default consructormethod will be added by default. So even if you don't add a constructor, there will be a default constructor. The general constructormethod returns an instance object this, but the method can also be specified constructorto return a brand new object, so that the returned instance object is not an instance of this class.

Let's take a closer look at superthe role of keywords:

superThis keyword can be used either as a function or as an object. In both cases, its usage is completely useless.

1. Use as a function

class A {}
class B extends A {
  constructor() {
    super();  // ES6 要求，子类的构造函数必须执行一次 super 函数，否则会报错。
  }
}

Note: The method constructormust be called in super, because the subclass does not have its own thisobject, but inherits the object of the parent class this, and then processes it, and superrepresents the constructor of the parent class. superAlthough it represents the constructor of the parent class A, it returns an instance of the subclass B, that is, the superinternal thisrefers to B, so super()here it is equivalent to ```A.prototype.constructor.call(this, props)`` .

class A {
  constructor() {
    console.log(new.target.name); // new.target 指向当前正在执行的函数
  }
}

class B extends A {
  constructor() {
    super();
  }
}

new A(); // A
new B(); // B

It can be seen that when super()executed, it points to the constructor of the subclass B, not the constructor of the parent class A. That is, super()the internal thispoints to B.

2. Use as an object

In ordinary methods, it points to the prototype object of the parent class; in static methods, it points to the parent class.

class A {
  c() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.c()); // 2
  }
}

let b = new B();

In the above code, in the subclass B super.c(), it is superused as an object. At this time, superin the ordinary method, pointing A.prototype, so super.c()it is equivalent to A.prototype.c().

When supercalling the method of the parent class, superthe subclass will be bound this.

class A {
  constructor() {
    this.x = 1;
  }
  s() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.s();
  }
}

let b = new B();
b.m(); // 2

In the above code, super.s()although it is called A.prototytpe.s(), A.prototytpe.s()it will bind the subclass B this, resulting in the output being 2 instead of 1. That is, what is actually executed is super.s.call(this).

Due to the binding of subclasses this, if you superassign a value to a certain property, then superthe thisassigned property will become the property of the subclass instance.

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

In the above code, super.xassigning a value of 3 is equivalent to assigning this.xa value of 3 to . And when reading super.x, it is called A.prototype.x, but there is no xmethod, so undefined is returned.

Note that superwhen using , 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();
    console.log(super); // 报错
  }
}

console.log(super);In the above code, superit is impossible to tell whether it is used as a function or as an object, so the JavaScript engine will report an error when parsing the code. This is, if the data type can be clearly indicated super, no error will be reported.

Finally, since objects always inherit from other objects, you can use the keyword in any object super.

Conclusion:
ES6 class is a "grammatical sugar" after all, so as long as you understand the concept of objects and object-oriented thinking in JavaScript, class is not difficult to understand.