Inheritance mode of JS

1. Prototype chain inheritance

characteristic ：
1. The prototype of a subtype is an instance of the parent type
2. You can inherit properties and methods on the constructor and prototype chain

shortcoming ：
1. Properties of reference types are shared by all instances ;
2. Creating Child When an instance of the , Not to Parent The ginseng

function Parent() {
    
 this.name = " Zhang San "
 this.subject = {
    sex: " male ", age: 40}
}
Parent.prototype.getName = function() {
    
	console.log(this.name)
}
function Child() {
    }
Child.prototype = new Parent()

var child = new Child()
var child2 = new Child()
var person = new Parent()
child.subject.sex = ' Woman '
console.log(child.subject)	    // {sex: ' Woman ', age: 40}
console.log(child2.subject)     // {sex: ' Woman ', age: 40}
child.name = 'wang'
console.log(child.name)         // wang
console.log(child2.name)        //  Zhang San 
child2.getName()               //  Zhang San 

console.log(child instanceof Parent)   // true

2. Constructor inheritance

shortcoming ：
1. Inherit the properties and methods inside the constructor , Cannot inherit methods and properties on the prototype chain ;
2. Properties and methods are defined in constructors , Every time you create an instance, you will create properties and methods
3. It's just an instance of a subclass , Not an instance of a parent class
advantage ：
1.child Can be directed to parent The ginseng ;
2. Properties of reference types will not be shared by all instances

function Parent() {
    
	this.firstName = " Zhang "
	this.lastName = " 3、 ... and "
	this.getFirstName = function() {
    
		console.log(this.firstName)
	}
	this.subject = {
    sex: ' male ', age: 10}
}
Parent.prototype.getName = function() {
    
	console.log(this.firstName + this.lastName)
}
function Child() {
    
	Parent.call(this)
	this.lastName = " Four "
	this.id = "student"
}

var child1 = new Child()
var child2 = new Child()
child1.subject.sex = ' Woman '
console.log(child1.firstName)     //  Zhang 
console.log(child1.subject) // {sex: ' Woman ', age: 10}
console.log(child2.subject) // {sex: ' male ', age: 10}
child2.getFirstName()       //  Zhang 
console.log(child instanceof Parent)   // false
child1.getName()            // Uncaught TypeError: child1.getName is not a function

3. Combination inheritance

Combine Prototype chain inheritance and Inheritance by borrowing the constructor

function Parent(name) {
    
 this.name = name
 this.subject = {
    sex: ' male ', age: 15}
}
Parent.prototype.getName = function() {
    
	console.log(this.name)
}
function Child(name) {
    
	Parent.call(this, name)
}

Child.prototype = new Parent()
Child.prototype.constructor = Child

var child = new Child('xiaoxiao')
var child2 = new Child('linlin')
console.log(child.name)   
child.subject.age = 18
console.log(child2.subject)
child.getName()

4. Original pattern inheritance

characteristic ： Create a new object based on an object
shortcoming ：
1. Properties of reference types are shared by all instances ; Same prototype chain inheritance

function createObject(o) {
    
	function F() {
    }
	F.prototype = o
	return new F()
}
var person = {
    
	name: ' Wang Lin ',
	subject: {
    
		sex: ' Woman ',
		age: 18
	}
}

var child = createObject(person)
var child2 = createObject(person)
console.log(child.name)     //  Wang Lin 
console.log(child.subject)  // {sex: ' Woman ', age: 18}
child.name = ' Zhang Xiaohua '
child.subject.age = 20
console.log(child.name)    //  Zhang Xiaohua 
console.log(child2.name)   //  Wang Lin 
console.log(child.subject) // {sex: ' Woman ', age: 20}
console.log(child2.subject) // {sex: ' Woman ', age: 20}

ES5 adopt Object.create() Methods normalize archetypal inheritance , Two parameters are acceptable , One is the object used as the prototype of the new object and an optional object that defines additional properties for the new object

var person = {
    
	name: ' Wang Lin '
}
var child = Object.create(person, {
    sex: {
    value: 16}})
console.log(child)

5. Parasitic inheritance

Add new properties and methods based on prototype inheritance to enhance objects

function CreateObj(o){
    
    var newob = Object.create(o)
    newob.getName = function(){
     //  Strengthen the object 
        console.log(this.name);
    }
    return newob; //  The specified object 
}
var ob = {
    name: 'xiaoxiao'}
var p1 = CreateObj(ob);
p1.getName(); // xiaoxiao 

6. Parasitic combination inheritance

Use parasitic inheritance to copy prototype objects , Use composite inheritance to inherit enhanced prototype objects and instance properties

The basic idea ： You don't have to call the constructor of the parent class to specify the prototype of the child type , Create a copy of the parent prototype

function Parent(name) {
    
	this.name = name
}
Parent.prototype.getName = function () {
     
 console.log(this.name) 
} 
function Child(name, job) {
    
	Parent.call(this, name)
	this.job = job
}

Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

var sub = new Child(' Zhang San ', 'student') 
sub.getName()

ES6 A new method ,Object.setPrototypeOf, You can create associations directly , And you don't have to add it manually constructor attribute

Object.setPrototypeOf(SubType.prototype, SuperType.prototype) 
console.log(SubType.prototype.constructor === SubType)       // true