Learn from the article

1. Prototype chain inheritance

The relationship between constructors, stereotypes, and instances: Each constructor has a stereotype object, each stereotype object contains a pointer to the constructor, and each instance contains a pointer to the stereotype object.

The essence of inheritance is copying, that is, rewriting a prototype object and replacing it with an instance of a new type.

Disadvantages: Multiple instances can tamper with operations on reference types.

    function Father(){
        this.colors = ['Father']; }function Son(){}// create an instance of Father and assign it to son.prototype
    Son.prototype = new Father() ;  
    
    let son = new Son() ;
    son.colors.push('Son');// This will tamper with the colors attribute of the inheritor, just like a shallow copy, which is a drawback of prototype chain inheritance
    
    let son2 = new Son() ;
    son2.colors      // ['Father','Son'] is tampered with by the successor
    
Copy the code

2. Borrow constructor inheritance

Using a parent class constructor to enhance a child class instance is equivalent to copying an instance of the parent class to a child class (without using a stereotype).

Disadvantages: – Can only inherit the parent class instance properties and methods, can not achieve inheritance of prototype properties and methods – can not achieve reuse, each subclass has a copy of the parent class instance function, affecting performance

    function Father(){
        this.info = ['A'.'B'.'C']; } Father.prototype.SayFather =function(){};function Son(){
        Father.call(this);// Core code
    }
    
    let father = new Father(),
        son = new Son() ;
        
        son.SayFather() ;           TypeError: Son.SayFather is not a function
        son.info.push( 'D'); son.info// ['A','B','C','D'] ;
       
    
    
Copy the code

3. Combinatorial inheritance

The combination of stereotype chain and constructor inheritance realizes that stereotype chain inherits stereotype properties and methods, and constructor inherits instance properties and methods

Disadvantages: When subclasses are used to create instance objects, there are two copies of the same properties/methods in the prototype.

    function Father(){
        this.name = 'Father';
    }
    
    Father.prototype.SayFather = function () {
        console.log("Father: ".this.name) ; };function Son() {
        Father.call(this);this.name = "Son" ;   // Attribute refactoring without tampering with parent attributes
        this.age = 18 ;         
    }
    
    Son.prototype = new Father() ;   // The inheritance attribute of the prototype chain is increased to 2
    
    Son.prototype.constructor = Son ; // Point to yourself,
    
    Son.prototype.SayFather = function () {      // Method refactoring without tampering with parent methods
         console.log("Son Reload: ".this.name) ; };let father = new Father() ,
        son = new Son() ;
    
    father.SayFather() ;  //Father: Father
    
    son.SayFather() ;     //Son Reload: Son 

Copy the code

4. Parasitic combination inheritance (the most mature method)

Object.create() MDN

- 'object.create ()' : the method creates a new Object, using an existing Object to provide the __proto__ of the newly created Object.Copy the code
     /** * archetype chain inheritance: subclass inherits parent class ** /
    function inheritProto(son, father) {
        let prototype = Object.create(father.prototype);  // Create a prototype copy of the object
        prototype.constructor = son;    // Enhance the object to compensate for the loss of the default constructor from rewriting the prototype
        son.prototype = prototype;      // Specify an object that will be overridden to the prototype of the subclass
    }
    
    function Father(name) {
        this.name = name;
    }

    Father.prototype.SayName = function () {
        console.log("Father:".this.name);
    };
    function Son(name, age) {
        Father.call(this, name );  // Inherits the parent instance attributes and methods
        this.age = age;
    }
    
    inheritProto(Son, Father);
    
    Son.prototype.SayAge = function () {
        console.log("Son".this.age ,this.name, );
    };

    let son = new Son("MrChen".19) ,
        father = new Father("Rainy"); son == age:19
    name: "MrChen"   // Inherits the parent instance attributes
        __proto__: Father
            SayAge: ƒ ()        // Inherit the subclass prototype method
            constructor: ƒ Son (name, age)__proto__:
                SayName: ƒ ()   // Inherits the parent prototype method
                constructor: ƒ Father (name)__proto__: Object
    
Copy the code

Mixin methods inherit multiple objects

function Son(){ SuperClass.call( this ) ; OtherClass.call( this ) ; } Son.prototype = Object.create( SuperClass.prototype ) ; Object. Assigin (Son) prototype, OtherClass prototype) : Son. Prototype. The constructor = Son; .Copy the code

Object.assign copies functions from the OtherSuperClass prototype to the Son prototype, making all instances of Son use the OtherSuperClass methods.

The ES6 class extends extends

  • super()keywords
class MyClass{ constructor( height, width ){ this.height = height ; this.width = width ; } show(){ } } class OtherClass extends{ constructor( height, width, name){ super(height, width) ; This. name = name}} let c = new OtherClass(18,19,'CC'); height: 18 name: "CC" width: 19 __proto__: MyClass constructor: class OtherClass __proto__: constructor: Class MyClass sayHello: ƒ sayHello() __proto__: ObjectCopy the code