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
- 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
- Cannot implement multiple inheritance
- 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
- Solves the problem of passing parameters from the subclass constructor to the parent constructor
- Multiple inheritance can be implemented (call or apply multiple parent classes)
shortcoming
- Methods are defined in constructors and cannot be reused
- 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
- No restriction on calling mode
- Simple and easy to implement
shortcoming
- Cannot inherit more than once
Combinatorial inheritance
- 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
- Functions can be reused
- There is no reference property problem
- You can inherit properties and methods, and you can inherit properties and methods of the prototype
shortcoming
- 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();