Inheritance in js

To realize inheritance, we first need a parent class. In js, there is actually no concept of class. In es6, although class is very similar to class, it is actually just a syntax sugar in es5

Prototype chain inheritance

The instance of the parent class is used as the prototype of the child class

function Woman(){ 
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();
advantage
  • It is simple and easy to implement, and the new instances of the parent class and attribute subclasses can be accessed
shortcoming
  1. You can add instance properties to subclasses. If you want to add prototype properties and methods, you need to follow the constructor of the new parent class
  2. Cannot implement multiple inheritance
  3. When creating a subclass instance, you cannot pass parameters to the parent constructor
Borrowing constructor inheritance (forged object, classic inheritance)
  • Copy the instance properties of the parent class to the child class
function Woman(name){
 //Inherited People
  People.call(this); //People.call(this,'tom); 
  this.name = name || 'kitty'
}
let womanObj = new Woman();
advantage
  1. Solves the problem of passing parameters from the subclass constructor to the parent constructor
  2. Multiple inheritance can be implemented (call or apply multiple parent classes)
shortcoming
  1. Methods are defined in constructors and cannot be reused
  2. You cannot inherit prototype properties / methods. You can only inherit instance properties and methods of the parent class
Instance inheritance (prototype inheritance)
function Wonman(name){
  let instance = new People();
  instance.name = name || 'wangxiaoxia';
  return instance;
}
let wonmanObj = new Wonman();
advantage
  1. No restriction on calling mode
  2. Simple and easy to implement
shortcoming
  1. Cannot inherit more than once
Combinatorial inheritance
  1. Call the constructor of the parent class, inherit the properties of the parent class, and realize function reuse by taking the instance of the parent class as the prototype of the child class
function People(name,age){
  this.name = name || 'wangxiao'
  this.age = age || 27
}
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}

function Woman(name,age){
  People.call(this,name,age)
}
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
let wonmanObj = new Woman(ren,27);
wonmanObj.eat(); 
advantage
  1. Functions can be reused
  2. There is no reference property problem
  3. You can inherit properties and methods, and you can inherit properties and methods of the prototype
shortcoming
  1. Since the parent class was called twice, two instances were generated
Parasitic combinatorial inheritance

Through the parasitic way to repair the shortcomings of combinatorial inheritance, the perfect realization of inheritance

//Parent class
function People(name,age){
  this.name = name || 'wangxiao'
  this.age = age || 27
}
//Parent method
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}
//Subclass
function Woman(name,age){
  //Inherit parent class properties
  People.call(this,name,age)
}
//Inherit parent method
(function(){
  // Create empty class
  let Super = function(){};
  Super.prototype = People.prototype;
  //The instance of the parent class is used as the prototype of the child class
  Woman.prototype = new Super();
})();
//Fix constructor pointing problem
Woman.prototype.constructor = Woman;
let womanObj = new Woman();
es6 inheritance

Less code and easy to understand

//class is equivalent to the constructor in es5
//When defining methods in class, you cannot add function before and after them. They are all defined in the protocol attribute of class
//All methods defined in class cannot be enumerated
//class can only define methods, not objects, variables, etc
//Strict mode is the default in class and method
//constructor in es5 is an implicit attribute
class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//Inherit parent class
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
     //Inherit parent class properties
     super(name, age); 
   } 
    eat(){ 
     //Inherit parent method
      super.eat() 
    } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

Keywords: Javascript Front-end

Added by mikegzarejoyce on Fri, 28 Jan 2022 11:16:07 +0200