• Let one constructor inherit the properties and methods of another
• Inheritance occurs between two constructors
• Is an application related to constructors

1. Prototype object inheritance

• Advantages: simple, convenient and easy to operate
• Disadvantages:
  • Cannot inherit properties and methods in constructors
  • You can only inherit properties and methods from prototype objects

function Parent(){
	this.name = "admin";
	this.sayHi = function(){
		console.log("hi");
	}
}
Parent.prototype.show = function(){
	console.log("Parent Method of");
}

function Child(){}

//Prototype object inheritance: deep copy
for(var i in Parent.prototype){
	Child.prototype[i] = Parent.prototype[i];
}

var p = new Parent();
console.log(p.name);    //admin
p.sayHi();			    //hi
p.show();		    	//Parent's method

var c = new Child();
console.log(c.name);    //undefined
//c.sayHi(); / / error: c.sayHi is not a function
c.show();		    	//Parent's method


Child.prototype.show = function(){
	console.log("Child How to write by yourself");
}
//Methods that do not overwrite Parent instances
c.show();		    	//Child's own way of writing

2. Prototype chain (__ proto__ )Inheritance

• advantage:
  • More simple, convenient and easy to operate
  • Methods and properties in constructors can be inherited
  • You can inherit methods and properties from the prototype
• Disadvantages: inconvenient to transfer parameters

function Parent(a){
	this.name = "admin";
	this.sayHi = function(){
		console.log("hi");
	};
	this.age = a;
}
Parent.prototype.show = function(){
    console.log("Parent Method of");
	console.log(this.age);
}

function Child(){}

var p = new Parent("18");
console.log(p.name);    //admin
p.sayHi();	            //hi
p.show();	            //Parent's method 18

//Prototype chain inheritance
Child.prototype = new Parent();
//Child instance C -- >__ proto__  --->  Child.prototype  --->Instance of parent -- >__ proto__  --->  Parent.prototype

var c = new Child();
console.log(c.name);    //admin
c.sayHi();	            //hi
c.show();	            //Parent's method undefined

Child.prototype.show = function(){
	console.log("Child How to write by yourself");
}
//Methods that do not overwrite Parent instances
c.show();			//Child's own way of writing

Constructor inheritance

• advantage:
  • Convenient transfer of ginseng
  • Multiple inheritance can be realized
• Disadvantages:
  • You can only inherit properties or methods inside a constructor,
  • Cannot inherit properties or methods from the prototype

function Parent(s){
	this.skill = s;
	this.sayHi = function(){
		console.log("hi");
	};
}
Parent.prototype.show = function(){
	console.log("parent Method of");
}

function Child(n){
	//Constructor inheritance: change this point
	Parent.call(this,n);
}

var p = new Parent("Official worker");
console.log(p.skill);	//Official worker
p.sayHi();				//hi
p.show();				//Method of parent

var c = new Child("Intern");
console.log(c.skill);	//Intern
c.sayHi();				//hi
//c.show(); / / error: c.show is not a function

Mixed inheritance (constructor inheritance + prototype object inheritance)

• advantage
  • Convenient transfer of ginseng
  • Multiple inheritance constructors can be implemented
  • Methods and properties in constructors can be inherited
  • You can inherit methods and properties from the prototype
• Disadvantages:
  • Slightly complex
  • When the prototype chain inherits, there are hidden dangers in parameter passing

function Parent(s){
	this.skill = s;
	this.sayHi = function(){
		console.log("hi");
	};
	//When testing prototype chain inheritance, parameter hidden danger, error: Cannot read property 'split' of undefined
	//When testing prototype object inheritance, no error is reported.
	this.skill.split();
}
Parent.prototype.show = function(){
	console.log("parent Method of");
}

function Child(s){
	//Constructor inheritance
	Parent.call(this,s);
}

//Prototype object inheritance: no hidden danger of parameter passing
for(var i in Parent.prototype){
	Child.prototype[i] = Parent.prototype[i];
}

//Prototype chain inheritance: hidden danger of parameter passing
//Child.prototype = new Parent();

var p = new Parent("Official worker");
console.log(p.skill);	//Official worker
p.sayHi();				//hi
p.show();				//Method of parent

var c = new Child("Intern");
console.log(c.skill);	//Intern
c.sayHi();				//hi
c.show();				//Method of parent

Child.prototype.show = function(){
	console.log("Child How to write by yourself");
}
//Methods that do not overwrite Parent instances
c.show();				//Child's own way of writing

class inheritance of ES6 (constructor inheritance + prototype chain inheritance)

• advantage:
  • Convenient transfer of ginseng
  • Methods and properties in constructors can be inherited
  • You can inherit methods and properties from the prototype
• keyword:
  • extends
  • super

class Parent{
	constructor(s){
		this.skill = s;
		this.name = "admin";
	}
	show(){
		console.log("parent Method of");
	}
}

class Child extends Parent{
	constructor(s){
		super(s);   //Change the function of this direction and parameter transfer
		this.skill = s;
		this.name = "anran";
	}
	show(){
		console.log("Child How to write by yourself");
	}
}

var p = new Parent("Official worker");
console.log(p.skill);       //Official worker
console.log(p.name);        //admin
p.show();			        //Method of parent

var c = new Child("Intern");
console.log(c.skill);       //Intern hello
//Properties and methods of Parent instance will not be overwritten
console.log(c.name);        //anran
c.show();			        //Child's own way of writing

Summary and comparison