js implementation inheritance

1. Prototype chain inheritance (Recommendation Index) ❤❤)

Take the instance of the parent class as the prototype of the child class

function Animal(){}

Animal.prototype.name = 'cat'
Animal.prototype.age = 1
Animal.prototype.say = function(){console.log('hello')}   

var cat = new Animal()
cat.name  //cat
cat.age   //1
cat.say() //hello

characteristic:

• A very pure inheritance relationship. An instance is an instance of a child class and an instance of a parent class
• Prototype methods / properties are added to the parent class, which can be accessed by all subclasses
• simple

Disadvantages:

• All properties from the prototype object are shared by all instances
• Cannot implement multiple inheritance
• When creating a subclass instance, you cannot pass parameters to the parent constructor
• To add properties and methods to subclasses, they must be executed after the new statement and cannot be placed in the constructor

2. Structural inheritance (recommended index) ❤❤)

Use the call or apply method to bind the constructor of the parent object to the child object

function Animal(){
    this.species = "animal"
}
function Cat(name,age){
    Animal.call(this)
    this.name = name
    this.age = age
}
var cat = new Cat('peas',2)
cat.name //peas
cat.age //2
cat.species //animal

characteristic:

• It solves the problem that subclass instances share parent class reference properties in prototype chain inheritance; That is, methods / properties on the parent class prototype cannot be inherited
• When you create a subclass instance, you can pass parameters to the parent class
• Multiple inheritance can be implemented (call multiple parent objects)

Disadvantages:

• An instance is not an instance of a parent class, but an instance of a child class
• Only the instance properties and methods of the parent class can be inherited, and the prototype properties / methods of the parent class cannot be inherited; But you can inherit subclass prototypes
• Function reuse cannot be realized. Each subclass has a copy of the parent class instance function, which affects performance

3. Instance inheritance (Recommendation Index) ❤❤)

Add a new attribute to the parent class instance and return it as a child class instance

	function Animal(name){
			     // attribute
			  this.name = name || 'Animal';
			  // Example method
			  this.sleep = function(){
			    console.log(this.name + 'be sleeping!');
			  }
			}
			// Prototype method
			Animal.prototype.eat = function(food) {
			  console.log(this.name + 'I am eating:' + food);
			};
			function Cat(name){
			    var instance = new Animal();
			    instance.name = name || 'TOM';
			    return instance;
			}
			var cat = new Cat();
			console.log(cat.eat('Dinner'))//TOM is having dinner
			console.log(cat.name)//TOM
			console.log(cat.sleep())//TOM is sleeping!
			console.log(cat instanceof Animal);//true
			console.log(cat instanceof Cat);//false

characteristic:

• There is no restriction on the calling method. No matter whether new subclass () or subclass (), the returned object has the same effect
• You can inherit parent class instances, properties, and prototypes
• You can modify the properties and instances of the parent class

Disadvantages:

• An instance is an instance of a parent class, not a child class
• Multiple inheritance is not supported

4. Portfolio inheritance (recommended index) ❤❤❤❤)

function Animal(){
    this.species = "animal"
}
function Cat(name){
    Animal.call(this)
    this.name = name
}
Cat.prototype = new Animal()
console.log(Cat.prototype.constructor)//Animal
Cat.prototype.constructor = Cat
var cat = new Cat('peas')
cat.species //animal
cat.name //peas
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

characteristic:

• To remedy the defect of construction inheritance, you can inherit instance properties / methods or prototype properties / methods
• It is both an instance of a child class and an instance of a parent class
• There is no reference property sharing problem
• Transmittable parameter
• Function reusability

Disadvantages:

• The parent class constructor is called twice and two instances are generated (the subclass instance masks the one on the subclass prototype)

5. Parasitic combination inheritance (recommended index) ❤❤❤❤)

The instance attribute of the parent class is cut off through parasitic method, so that the instance method / attribute will not be initialized twice when calling the construction of the parent class twice, so as to avoid the disadvantage of combined inheritance

// Define an animal class
function Animal (name) {
  // attribute
  this.name = name || 'Animal';
  // Example method
  this.sleep = function(){
    console.log(this.name + 'be sleeping!');
  }
}
// Prototype method
Animal.prototype.eat = function(food) {
  console.log(this.name + 'I am eating:' + food);
};
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // Create a class without an instance method
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //Prototype instances as subclasses
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

Cat.prototype.constructor = Cat; // The next constructor needs to be repaired

6. The extends keyword implements inheritance

class Animal{
    
}
class Cat extends Animal{
    constructor(){
        super();
    }
}

To implement inheritance using extensions, you must add the super keyword to define the constructor of the subclass. Here, super() is equivalent to animal prototype. constructor. call(this)

Reference blog: https://www.cnblogs.com/humin/p/4556820.html