Several Ways to Realize Inheritance in JavaScript

Directory construction inheritance (implemented with call)
Prototype chain inheritance (realized by prototype chain)
Combination inheritance (construction inheritance + prototype chain inheritance)
Parasitic combination inheritance
Additional: With the help of (Object. create)

The mainstream ways of implementing inheritance in non-ES6 code can be mainly divided into:
Construction inheritance, prototype chain inheritance, combination inheritance of construction inheritance + prototype chain inheritance, and inheritance mode derived from combination inheritance.

Construct inheritance (implemented with call)

Realization

function Super(age){
 this.age = age;
 this.say = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
var child = new Child("min",23)
console.log(child instanceof Super); // false
console.log(child instanceof Child); // true

Advantages

(1) Multiple inheritance can be implemented (call multiple parent class objects)
(2) Parameters can be passed to the parent in the constructor

Disadvantages

(1) You can only inherit the properties and methods of the parent class instance, but not the properties and methods of the prototype
(2) An instance is not an instance of a parent class, but an instance of a subclass

Prototype chain inheritance (realized by prototype chain)

Realization

function Super(){
 this.getName = function(){
 console.log(this.name)
 }
}
function Child(name){
	this.name = name;
}
Child.prototype = new Super(); //  You can pass construction parameters here 
Child.prototype.constructor = Child;
var child = new Child("min");
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

Advantages
(1) Parent class prototype properties and methods can be accessed by subclasses
(2) An instance is an instance of a subclass and an instance of a parent class

Disadvantages
(1) Unable to implement multiple inheritance (2) Unable to pass parameters to parent class constructor when creating subclass instance

Combination inheritance (construction inheritance + prototype chain inheritance)

Realization

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age);
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = new Super(1); 
Child.prototype.constructor = Child;
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

Advantages
(1) It combines the advantages of structure + prototype chain inheritance

Disadvantages
(1) Child. prototype = new Super (); It is called once more, so that there are 1 unnecessary attributes in the prototype object, such as age attribute in the above example

Parasitic combination inheritance

Realization

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
(function(){
 function Copy(){}
 Copy.prototype = Super.prototype;
 Child.prototype = new Copy();
})()
Child.prototype.constructor = Child;
var child = new Child("min",23);

Remarks
Q: Why not use Child. prototype = Super. prototype directly;
Answer: Child. prototype. constructor = Child; Key code, written above Super. prototype will also change (reference type, pointing to the same address)

Advantages
(1) This should be the most perfect scheme to realize inheritance. The extends keyword of es6 is also inherited in this way after babel conversion.

Additional: With the help of (Object. create)

Realization

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = Object.create(Super.prototype,{
 constructor:{ //  Constructor repair 
 value: Child
 }
})
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

The above is the JavaScript implementation of several ways of inheritance details, more about JavaScript implementation of inheritance information please pay attention to other related articles on this site!