Inheritance in js

1. Prototype succession

Features: let the prototype of the child class point to the instance of the parent class;

  • Put the instance of the parent class on the prototype chain of the child class. When the child class instance wants to call these properties and methods, it is actually based on__ proto__ The prototype is completed in the form of chain search
  • Child class instances can directly modify the methods on the parent class (which will affect other parent class instances)
  • The private properties and methods in the parent class will become the public properties and methods of the child class after the prototype chain inheritance is implemented
	//Parent class constructor
	function Parent(x){
	    this.x = x;
	}
	//Parent class prototype
	Parent.prototype.getX = function (){
	    console.log("getX",this.x)
	}
	
	//Subclass constructor
	function Child(y){
	    this.y = y;
	}
	Child.prototype = new Parent(100);
	Child.prototype.constructor = Child;
	Child.prototype.getY = function (){
	    console.log("getY",this.y)
	}
	//Subclass instance
	let c1 = new Child(200);
	console.log(c1)
  • Prototype chain diagram:

2. call inheritance

Features: borrowing constructor (call) inheritance

  • In the Child method, the parent constructor is executed as an ordinary function, and this in the parent constructor points to the Child instance, which is equivalent to setting private properties and methods for the Child instance
  • Only the private properties and methods of the Parent class can be inherited (because the Parent is only executed once as an ordinary function, which has nothing to do with the methods and properties on the Parent prototype)
  • The properties and methods private to the parent class will become the properties and methods private to the child class
	//Parent class constructor
	function Parent(x){
	    this.x = x;
	    this.sayHello = function (){
	        console.log("sayHello")
	    }
	}
	//Parent class prototype
	Parent.prototype.getX = function (){
	    console.log("getX",this.x)
	}
	
	//Subclass constructor
	function Child(y,x){
	    Parent.call(this,x);
	    // Equivalent to Parent.call(this,x)
	    // this.x = x;
	    // this.sayHello = function (){
	    //     console.log("sayHello")
	    // }
	    this.y = y;
	}
	Child.prototype.getY = function (){
	    console.log("getY",this.y)
	}
	//Subclass instance
	let c1 = new Child(200,100);

3. Combination inheritance

Features: combination of prototype chain inheritance and borrowing constructor inheritance

  • Subclass instances can use the private properties and methods of the parent class
  • The properties and methods private to the parent class will also become the properties and methods private to the child class instance
  • Public properties and methods of subclass instance and parent class
  • There will be an extra private attribute of the parent class on the prototype chain of the child class
	//Parent class constructor
	function Parent(x){
	    this.x = x;
	    this.sayHello = function (){
	        console.log("sayHello")
	    }
	}
	//Parent class prototype
	Parent.prototype.getX = function (){
	    console.log("getX",this.x)
	}
	
	//Subclass constructor
	function Child(y,x){
	    Parent.call(this,666)
	    this.y = y;
	}
	Child.prototype = new Parent(100);
	Child.prototype.constructor = Child;
	Child.prototype.getY = function (){
	    console.log("getY",this.y)
	}
	//Subclass instance
	let c1 = new Child(200,666);

4. Parasitic combinatorial inheritance

Features: combined with prototype chain inheritance and constructor inheritance, you need to create your own prototype to realize parasitic combinatorial inheritance

  • Parent class private properties and methods, child class instance private properties and methods
  • The public attributes and methods of the parent class and the public attributes and methods of the child class instance
  • Modifying public properties and methods of a subclass instance will not affect the instance of the parent class
	//Parent class constructor
	function Parent(x){
	    this.x = x;
	    this.sayHello = function (){
	        console.log("sayHello")
	    }
	}
	//Parent class prototype
	Parent.prototype.getX = function (){
	    console.log("getX",this.x)
	}
	let p1 = new Parent(100);
	
	//Subclass constructor
	function Child(y,x){
	    Parent.call(this,666)
	    this.y = y;
	}
	// Child.prototype = new Parent(100);
	// Child.prototype = {};
	
	Child.prototype = Object.create(Parent.prototype);
	Child.prototype.constructor = Child;
	Child.prototype.getY = function (){
	    console.log("getY",this.y)
	}
	//Subclass instance
	let c1 = new Child(200,666);

5. ES6 Class inheritance

Features: inheritance through extensions

  • ES6 inheritance = = > class subclass constructor extends parent class constructor {}
  • The class in ES6 cannot be directly executed as an ordinary function
  • You must use the new keyword to create an instance. It cannot be executed as an ordinary function
  • When using inheritance in ES6, there is no way to redirect the prototype of subclasses directly
  • Child.prototype.proto = Parent.prototype;
	class Parent {
	    constructor(x) {
	        this.x = x;
	        this.sayHello = function () {
	            console.log("sayHello")
	        }
	    }
	    getX() {
	        console.log("getX==>", this.x)
	    }
	}
	class Child extends Parent {
	    //If the constructor is not written, no error will be reported and the inheritance will be normal
	    //If you don't write constructor, the browser will automatically help us create the following code
	    // constructor(...args){
	    //      super(...args)
	    // }
	    constructor(y) {
	        super(100);// Parent.call(this,100)
	        //Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
	        //If the constructor is written in the form of inheritance, you must use super to inherit the private properties and methods of the parent class, otherwise an error will be reported
	        this.y = y;
	    }
	    getY(){
	        console.log("getY==>", this.y)
	    }
	}
	let c1 = new Child(200)

Tags: Javascript inheritance

Posted on Fri, 01 Oct 2021 17:48:19 -0400 by Madzz