Several ways to implement inheritance in JavaScript

The mainstream ways of implementing inheritance in non-ES6 code can be divided into:
Structural inheritance, prototype chain inheritance, structural inheritance + prototype chain inheritance combined inheritance, and inheritance methods derived from combined inheritance.

Structural inheritance (implemented with call)

accomplish

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

advantage

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

shortcoming

(1) You can only inherit the properties and methods of the parent class instance, not the properties and methods on the prototype
(2) The instance is not an instance of the parent class, but an instance of the child class

Prototype chain inheritance (implemented with the help of prototype chain)

accomplish

function Super(){
 this.getName = function(){
 console.log(this.name)
 }
}
function Child(name){
	this.name = name;
}
Child.prototype = new Super(); // You can pass the construction parameter 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

advantage
(1) The parent class prototype properties and methods are accessible to child classes
(2) The instance is an instance of the subclass and also an instance of the parent class

shortcoming
(1) Multiple inheritance cannot be achieved (2) When creating a subclass instance, it is impossible to pass parameters to the parent class constructor

Combined inheritance (construction inheritance + prototype chain inheritance)

accomplish

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

advantage
(1) Combining the advantages of construction + prototype chain inheritance

shortcoming
(1) Child.prototype = new Super(); is called once more, which results in some unnecessary properties in the prototype object, such as the age property in the example above.

Parasitic Compositional Inheritance

accomplish

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);

Note: Why not use Child.prototype = Super.prototype directly?
Answer: Child.prototype.constructor = Child; The key code, writing Super.prototype above will also change (reference type, pointing to the same address)

advantage
(1) This should be the most perfect solution to implement inheritance. The es6 extends keyword also implements inheritance in this way after the code is converted by babel.

Extra: With (Object.create)

accomplish

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 repairs 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 are the details of several ways to implement inheritance in JavaScript. For more information about JavaScript implementation inheritance, please pay attention to other related articles on 123WORDPRESS.COM!