JS inheritance and prototype chain

One 、 class class

stay es6 in , have access to class Keyword declares a class , Then instantiate the object with this class .

Class abstracts the common part of an object , It refers to a general category Object refers to a particular , By instantiating a concrete object

Inherit ： Subclasses can inherit some properties and methods of the parent class

class Father{
    
           constructor(x,y){
    
            this.x = x;
            this.y = y;
           }
           sum(){
    
               console.log(this.x + this.y);
               console.log(this.x)
           }
           say(){
    
               return ' I'm daddy '
           }
       }
       class Son extends Father{
    
        constructor(x,y){
    
            super(x,y);// Called the constructor in the parent class , Must be in subclass this Previous call 
            this.x = x;
            this.y = y;
           
        }
        say(){
    
            console.log(super.say() + ' Son ')//super Call the normal function of the parent class 
        }
       }
       var son = new Son(1,2)
       son.sum();
       son.say();

1. Class constructor Constructors
There is a constructor function , You can receive the passed parameters , And return the instance object
constructor Function as long as new When generating an instance , This function will be called automatically , If you don't write constructor This function , Class will also automatically generate this function .
The common attributes of the class are placed in constructor Inside
There is no need to write all the functions in the class function; No more , Division
2.extends Let the child class inherit the parent class
super keyword ： You can call the constructor（ Constructors ）, You can also call the normal function of the parent class .
Subclass in constructor （constructor） Use in super, Must be on this front （ You must first call the constructor of the parent class , Then use the subclass construction method ）
3. In the inheritance , If you instantiate a subclass and output a method , Let's see if the subclass has this method , If there is, execute the subclass first
In the inheritance , If the subclass doesn't have , To find whether the parent class has this method , If there is , Just execute this method of the parent class .（ Nearby principle ）
4. stay es6 The middle class has no variable promotion , So you have to define the class first , To instantiate an object through a class
The common properties and methods in the class must be added with this

Two 、 Constructors

A constructor is a special function , It's mainly used to initialize objects （ That is, assign values to object member variables ）, It's always related to new Use it together . We can extract some public properties and methods from objects , Then encapsulate it into this function .

Instance members ：( The function passes through this Added members ) Can only be accessed through instantiated methods
Static members ：( Members added to the constructor itself ) Static members can only be accessed through constructors

new What did you do during execution ？
（1） Create a new empty object in memory

（2） Give Way this Point to this new object

（3） Execute the code in the constructor , Add properties and methods to this new object

（4） Return to this new object （ So you don't need to return）

 function Star(uname,uage){
    
           this.uname = uname;// Instance members 
           this.uage = uage;
           this.sing = function(){
    
               console.log(' I sing ')
           }
       }
       var ldh = new Star(' Lau Andy ',20);
       console.log(ldh.uname);
       ldh.sing()//1. Instance members ( The function passes through this Added members ) Can only be accessed through instantiated methods 
       //Star.sing()// Report errors 

       Star.sex = ' male ';//2. Static members ( Members added to the constructor itself )
       console.log(ldh.sex)//undefined
       console.log(Star.sex)// male   Static members can only be accessed through constructors 

Constructor method is easy to use , But there is a problem of wasting memory

In the constructor The same way In every time new When it comes to an example , Will open up a space in the pile . We want this constant method to take up only one space , So there's a constructor prototype .

3、 ... and 、 Constructor prototype prototype

JS Specify that every constructor has a prototype attribute , Point to another object . We can take those unchanging methods , Directly defined in prototype On the object , In this way, all instances of objects can share these methods .

Four 、es5 Inherit and es6 The difference between inheritance

Inherit ： Subclasses can inherit some properties and methods of the parent class
（1）Es5 The essence of inheritance is to create instance objects of subclasses first , Then add the method of the parent class to this On （Father.call(this)）.
Es6 The essence of inheritance is to create the instance object of the parent class first this, And then modify it with the constructor of the subclass this.
（2）Es5 The inheritance of is implemented through constructors and prototypes
Es6 adopt class Keyword definition class , Class has construction methods , Between classes through keywords extends Implementation inheritance . Subclasses must be constructor Call in method super Method , Otherwise, an error will be reported for the new instance . Because subclasses don't have their own this object , It inherits from the parent class this object , And then process it . If you don't call super Method , Subclasses will not get this object .

5、 ... and 、es5 Define a class , And implement inheritance
Combination inheritance

function Father(name,age){
    
        this.name = name;
        this.age = age;
    }
    Father.prototype.work = function(){
    // Father's method 
        console.log(' Father works ')
    }
    function Son(name,age){
    
        Father.call(this,name,age)// Inherit the properties of the parent class （ stay father Zhongba this An instance that points to a child constructor ）
    }
    Son.prototype.study = function(){
    
        console.log(' Children go to school ')
    }
    Son.prototype = new Father();// Methods that inherit the parent class （ Direct assignment , Modified the of the son prototype object constructor）
    Son.prototype.constructor = Son;// Put your son's constructor Revise it back 
    var son = new Son(' Xiao Ming ',18);
    console.log(son);
    console.log(son.__proto__.constructor)
    console.log(son instanceof Father);

Parasitic combinatorial inheritance

 function Father(name,age){
    
            this.name = name;
            this.age = age
        }
        Father.prototype.work = function(){
    
            console.log(' Father works ')
        }
        function Son(name,age){
    
            Father.call(this,name,age);// Inherit the properties of the parent class 
        }
        Son.prototype.study = function(){
    
            console.log(' Children go to school ')
        }
        Son.prototype = Object.create(Father.prototype);
        // Methods that inherit the parent class ： First create a temporary constructor , Then take the father's prototype object as the prototype of this constructor , Finally, return a new instance of the temporary type 
        // Then let the son's prototype object point to a new instance of the temporary type （ In this way, inheritance can be realized ）
        Son.prototype.constructor = Son;
        var son = new Son('aaa',23);
        console.log(Son.prototype);
        console.log(son.__proto__.constructor)

        object.create It's equivalent to the following create function （ Do not write ）
        function create(obj) {
    
            function F() {
    }// First create a temporary constructor 
            F.prototype = obj;// The incoming object is then used as the prototype for the constructor 
            return new F();// Returns a new instance of the temporary type 
        }