First of all, let's talk about class. In fact, there is no class in JS. Class is just syntactic sugar, and the essence is still function.

class Person {}
Person instanceof Function // true

In the previous chapter we explained the knowledge points of prototype, in this section we will use prototype and class respectively to implement inheritance.

Combinatorial inheritance Combination inheritance is the most commonly used method of inheritance

function Parent(value) {
  this.val = value
}

Parent.prototype.getValue = function() {
  console.log(this.val)
}

function Child(value) {
  Parent.call(this, value)
}

Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

The core of the above inheritance method is to inherit the properties of the parent class through Parent.call(this) in the constructor of the child class, and then change the prototype of the child class to new Parent() to inherit the function of the parent class.

The advantage of this inheritance method is that the constructor can pass parameters and will not be shared with the parent class's reference properties. It can reuse the parent class's functions. However, there is also a disadvantage that the parent class constructor is called when the parent class function is inherited. There are unnecessary parent attributes on the prototype of the subclass, and there is a waste of memory.

Parasitic combinatorial inheritance

This method of inheritance optimizes combined inheritance. The disadvantage of combined inheritance is that the constructor is called when inheriting the parent class function. We only need to optimize this point.

Function Parent(value) {
  this.val = value
}

Parent.prototype.getValue = function() {
   console.log(this.val)
}

Function Child(value){
   Parent.call(this, value)
}

Child.prototype = Object.create(Parent.prototype, {
       constructor: {
          value: Child,
          enumerable: false,
          writable: true,
         configurable: true
     }
})

const child = new Child(1)
child.getvalue() // 1
child instanceof Parent // true

The core of the above inheritance implementation is to assign the prototype of the parent class to the subclass, and set the constructor to the subclass. This not only solves the useless parent class attribute problem, but also correctly finds the constructor of the subclass.

Class inheritance The above two inheritance methods are solved through prototypes. In ES6, we can use class to implement inheritance, and the implementation is very simple

class Parent {
   constructor(value){
      this.val = value
   }
   getValue(){
      console.log(this.val)
   }
}

class Child extend Parent{
    constructo(value){
     spuer(value)
     this.val = value
    }
}

let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

The core of class implementation inheritance is to use extends to indicate which parent class it inherits from, and super must be called in the subclass constructor, because this code can be regarded as Parent.call(this, value). Of course, I said before that there is no class in JS, the essence of class is function.