Several ways to implement inheritance in JavaScript

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

Construct inheritance (implemented with call)

accomplish

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

advantage

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

shortcoming

(1) Only inherit the properties and methods of the parent class instance, but not the properties and methods on the prototype.
(2) An instance is not an instance of the parent class, but an instance of the child class

Protochain inheritance (implemented with the help of prototype chain)

accomplish

function Super(){
  = function(){
 ()
 }
}
function Child(name){
	 = name;
}
 = new Super(); // Here you can pass constructor parameters = Child;
var child = new Child("min");
(child instanceof Super); // true
(child instanceof Child); // true
(); // Child

advantage
(1) Both parent class prototype properties and methods and subclasses can access
(2) An instance is an instance of a subclass and an instance of a parent class

shortcoming
(1) Multiple inheritance cannot be implemented (2) When creating a subclass instance, the parameters cannot be passed to the parent class constructor

Combination inheritance (construction inheritance + prototype chain inheritance)

accomplish

function Super(age){
  = age;
  = function(){
 ();
 }
}
function Child(name,age){
 (this,age)
  = name;
}
 = new Super(1); 
 = Child;
var child = new Child("min",23);
(child instanceof Super); // true
(child instanceof Child); // true
(); // Child

advantage
(1) Combined with the advantages of construct + prototype chain inheritance

shortcoming
(1) = new Super(); Called once more, causing some unnecessary attributes in the prototype object, such as the age attribute in the above example

Parasitic combination inheritance

accomplish

function Super(age){
  = age;
  = function(){
 ()
 }
}
function Child(name,age){
 (this,age)
  = name;
}
(function(){
 function Copy(){}
  = ;
  = new Copy();
})()
 = Child;
var child = new Child("min",23);

Remark
Q: Why is it not used directly = ;
Answer: = Child; the key code, written on it will also change (reference type, pointing to the same address)

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

Additional: With the help of ()

accomplish

function Super(age){
  = age;
  = function(){
 ()
 }
}
function Child(name,age){
 (this,age)
  = name;
}
 = (,{
 constructor:{ // Constructor fix value: Child
 }
})
var child = new Child("min",23);
(child instanceof Super); // true
(child instanceof Child); // true
(); // Child

The above is the detailed content of several ways to implement JavaScript inheritance. For more information about JavaScript inheritance, please pay attention to my other related articles!