Just in the process of review review related to THE inheritance of JS knowledge, write down the blog to summarize.

Prototype chain inheritance

Prototype chain inheritance is to add a Parent class to the prototype of a subclass, as in Chile. Prototype = new Parent

/** * Prototype chain inheritance */
function Parent() {
  this.name = 'Zeekg';
}

Parent.prototype.getName = function () {
  console.log(this.name);
}

function Child() {}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // Zeekg
Copy the code

If you use this method of inheritance, you will not be able to pass arguments to the parent class when creating the instance.

Using constructors

Use the call() method in a subclass to call properties and methods in the superclass. This method can then pass arguments to the parent class. But methods are defined in constructors, so they are created every time an instance is created.

/** * uses the constructor */
function Rectangle(height, width) {
  this.height = height
  this.width = width
}

function Square(length) {
  Rectangle.call(this, length, length)
}

let square = new Square(5)
console.log(square.height);
Copy the code

Combination of inheritance

This combination inheritance is prototype-chain inheritance combined with constructors. This type of inheritance is quite common. But in this case, the parent constructor is called twice.

/** * Combination inheritance */
function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.getArea = function () {
  return this.height * this.width
}

function Square(length) {
  Rectangle.call(this, length, length) // Here the parent constructor is called once
}

Square.prototype = new Rectangle() // Here the parent constructor is called once

let square = new Square(5)
console.log(square.getArea());
Copy the code

The other thing about this method is that when you print square, you’ll find that both the instance square and the square. Prototype have both height and width properties.

Parasitic combinatorial inheritance

There is a bit of a problem with the combination inheritance approach above. The parasitic combination inheritance method uses the object.creaet () method.

/** * Parasitic combinatorial inheritance */
function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.getArea = function () {
  return this.height * this.width
}

function Square(length) {
  Rectangle.call(this, length, length)
}

Square.prototype = Object.create(Rectangle.prototype)
Square.prototype.constructor = Square

let square = new Square(5)
console.log(square.getArea());
Copy the code

The succession of ES6

This method is simple, but it is syntactic sugar, and the underlying implementation principle is the same as above.

/** * class inheritance */
class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }
  getArea() {
    return this.height * this.width
  }
}

class Square extends Rectangle {
  constructor(length) {
    super(length, length)
  }
}

let square = new Square(5)
console.log(square.getArea());
Copy the code

About super () :

Be sure to call super() before accessing this in the constructor, because it is responsible for initializing this.

If you do not use super() in a constructor of a derived class, an error is reported.

If there are any inaccuracies, please let us know in the comments section.