1, Prototype chain inheritance

The key of prototype chain inheritance is to assign new Parent() to child Prototype, which means that when accessing the properties of the child object, if it cannot be found on the child, it will go to the child Prototype. If you can't find it, you'll go to parent Find it in prototype, so as to realize inheritance.

function Parent(name,age){
  this.name = name;
  this.age = age;
  this.arr = [1,2];
  this.nihao = function(){        
     console.log(`Hello, I'm  ${this.name},${this.age}year`)     
  }
}
Parent.prototype.changeAge = function(){    
  this.age++;
  console.log(this.age) 
}
function Child(){}
Child.prototype = new Parent()
Child.prototype.constructor = Child
console.log(s1.name)//undefined

Disadvantages:

1. If a property is of reference type, once an instance modifies this property, all instances will be affected.

s1.arr.push(3) 
console.log(s1.arr)  //[1, 2, 3]
s2 = new Child()    
console.log(s2.arr)  //[1, 2, 3]

1. When creating a Child instance, you cannot pass parameters.

2, Constructor inheritance

Calling the parent class inside the child class and changing the direction of this in the parent class through apply is equivalent to copying the instance attribute of the parent class to the child class.

function Parent(name,age){ 
  this.name = name; 
  this.age = age; 
  this.arr = [1,2]; 
  this.nihao = function(){       
    console.log(`Hello, I'm  ${this.name},${this.age}year`) 
  }
}
Parent.prototype.changeAge = function(){     
   this.age++; 
   console.log(this.age)
}
function Child(){
  Parent.apply(this, arguments)
}
const s1 = new Child('Mike', 18)
console.log(s1.name) //Mike
console.log(s1.age)   //18

Disadvantages:
Only instance properties and methods of the parent class can be inherited, and prototype properties or methods cannot be inherited.

3, Composite inheritance (the first two combinations)

function Parent(name,age){ 
  this.name = name; 
  this.age = age; 
  this.arr = [1,2]; 
  this.nihao = function(){       
    console.log(`Hello, I'm  ${this.name},${this.age}year`) 
  }
}
Parent.prototype.changeAge = function(){     
   this.age++; 
   console.log(this.age)
}
function Child(){
  Parent.apply(this, arguments)
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
const s1 = new Child('Mike', 18)
console.log(s1.name) //Mike

Disadvantages: the parent constructor is called twice (consuming memory), and the constructor of the subclass will replace the parent constructor on the prototype.

4, Parasitic combinatorial inheritance

Use object Create() for parent Prototype makes a shallow copy and fixes the problem of composite inheritance.

function Parent(name,age){ 
  this.name = name; 
  this.age = age; 
  this.arr = [1,2]; 
  this.nihao = function(){       
    console.log(`Hello, I'm  ${this.name},${this.age}year`) 
  }
}
Parent.prototype.changeAge = function(){     
   this.age++; 
   console.log(this.age)
}
function Child(){
  Parent.apply(this, arguments)
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
const s1 = new Child('Mike', 18)
console.log(s1.name) //Mike

Parasitic combinatorial inheritance can basically solve the shortcomings of the previous inheritance methods, better achieve the desired results of inheritance, reduce the number of constructions and reduce the cost of performance.

5, class inheritance

class Parent {
    constructor() {
        this.name = 'aaa';
    }

    getName() {
        console.log('getname');
    }
}

class Child extends Parent {
    constructor() {
        super();
    }
}

const p1 = new Child();
p1.getName();

6, What do you do when creating an object using new?

function Father() {};
const Child = new Father();

One inherited from father The new object Child of prototype is created
2. Child .proto points to father Prototype, or child proto = Father.prototype
3. Point this to the newly created object Child
4. Return new object
4.1 if the constructor does not explicitly return a value, this is returned
4.2 if the constructor has an explicit return value and is a basic type, such as number, string and Boolean, this is still returned
4.3 if the constructor has an explicit return value and is an object type, such as {a: 1}, the object {a: 1} is returned