preface

  • This article will take about 6 minutes \color{red}{6 minutes}
  • This article tells about:
      1. Inheritance in JS
      1. The first inheritance scheme: [Prototype inheritance]
      1. Second inheritance scheme: CALL inheritance
      1. The third inheritance scheme: [Parasitic combinatorial inheritance]
      1. Classes and inheritance implemented in ES6
  • If you have any questions, please leave a message to me. I will reply when I see it. If I can’t solve it, we can also discuss and learn together. If you think there is any mistake, please kindly comment and correct me. Thank you very much. I hope to learn and make progress together with you in the future.
  • The next article will be updated as soon as possible, and the already written article will be modified intermittently in the future as understanding deepens or illustrations are added.
  • If you find this article helpful, please give it a thumbs-up. Thank you!
  • Welcome to reprint, please indicate the source.

Inheritance in JS

  • JS itself is a programming language based on object-oriented development
    • Also implemented => classes: encapsulation, inheritance, polymorphism
  • encapsulationA class is also a function that encapsulates the code that implements a function to achieve “low coupling, high cohesion”
  • polymorphism: reload, rewriteBecause javascript is weakly typed, it is not strictly polymorphic.
    • rewrite: subclasses override methods on their parent classes (run with inheritance)
    • overloading: The same method has different functions due to different parameters or return values (JS does not have strict overloading)【JS overloading: is in the same method, according to the different parameters to achieve different functions 】
  • inheritanceA subclass inherits methods from its parent class
    • The goal is to allow instances of subclasses to have both private attributes and public methods in their parent classes
    • Inheritance in JS is not quite the same as inheritance in other languages, is based on the prototype and prototype chain lookup inheritance.

Class constructor and the public methods of subclasses will be lost.

  • Stereotype inheritance: make the stereotype of a subclass equal to an instance of the parent class

  • Several characteristics of prototype inheritance:

    1. Property methods that are private and public in the parent class eventually become public to the subclass instance
    2. Unlike inheritance in other languages, stereotype inheritance does not “copy” the attribute methods of the parent class to the child class. Instead, the child class instance looks up its own defined attributes and methods based on the __proto__ stereotype chain【 Point to/find 】
      • At a time whenModify the subclass prototype(has become an instance of the parent class)[Subclass instance].proto. = XXX XXX 】If the content is modified, it has an effect on other instances of the subclass, but not on instances of the parent class.
      • At a time whenIf you modify the parent stereotypeThe contents of the[Subclass instance].proto.proto. = XXX XXX 】, which affects not only instances of other parent classes, but also instances of other subclasses

  • Prototype inheritance is implementedAll private and public parent classes become public subclass instances

  • But we hope moreThe private parent becomes the private instance of the subclass, and the public parent becomes the public instance of the subclass.

CALL inheritance can only be inherited from a private parent class, not from a public parent class.

  • In the constructor of a subclass, treat the parent class as a normal function, and CALL this to refer to a subclass. (There is no instance of the parent class, so the prototype is not related to the instance of the subclass.)
  • This is equivalent to forcing the instance of a subclass to set a private attribute of the parent class, which is equivalent to letting the instance of the subclass inherit the private attribute of the parent class. This inheritance is “copy-style”
     function Parent(){
         this.x = 100;
     }
     Parent.prototype.getX = function(){
         return this.x;
     };
     function Child(){
         // In the constructor of the subclass, treat the parent class as a normal function, and execute it with the CALL modifier this to refer to the subclass.
         // If there is no instance of the parent class, the prototype of the parent class is not related to the instance of the child class.
         // instance c1 of this->Child when the constructor executes
         Parent.call(this);//=>this.x = 100;
         // This is equivalent to forcing an instance of a subclass to set a private property of its parent class,
         // The subclass instance inherits the private attributes of the parent class, which is copy-like
         this.y = 200;
     }
     Child.prototype.getY = function(){
         return this.y;
     };
     let c1 = new Child;
     console.log(c1); // Child {x: 100, y: 200}
Copy the code

  • CALL inheritance is still not implementedThe private parent becomes the private instance of the subclass, and the public parent becomes the public instance of the subclass.

Third inheritance scheme in JS: parasitic combinative inheritance; CALL inheritance + prototype redirection; parent private become subclass instance private, parent public become subclass instance public.

  • Using prototype redirection, we can change a method that is public in the parent class to be public in the subclass instance, while keeping the CALL inheritance from the parent class private to the subclass instance private.
  • but[Prototype redirection, modify proto prototype chain pointing]It is not supported in Internet Explorer earlier versions,Object.create and Object.assign are used to modify the pointer of the prototype chain.

    1. 【 Object. Create 】Start by creating an empty object and having its prototype chain point to the prototype object we specified

    2. 【 Object. The assign 】Using this method, merge the subclass’s prototype object with the empty object

    3. This preserves the constructor and common attribute methods of the subclass’s prototype objects, and changes the prototype chain of the subclass’s prototype objects to that of the parent class, thereby making the parent class public to the subclass instance public. It is compatible with older browsers. It also works with CALL to allow subclass instances to inherit private attributes from their parent class.

   function Parent(){
       this.x = 100;
   }
   Parent.prototype.getX = function(){
       return this.x;
   };
   function Child(){
       Parent.call(this);
       this.y = 200;
   }
   // Child.prototype.__proto__ = Parent.prototype; // [Modify proto prototype link pointing] is not supported in lower versions of IE
   let A = Object.create(Parent.prototype);
   // [object.create] create an empty Object with its prototype chain pointing to the specified prototype Object
   Child.prototype = Object.assign(A,Child.prototype);
   // [object. assign] use this method to merge the subclass's prototype Object with the empty Object
   // The prototype chain of the subclass's prototype object is now pointing to the parent class's prototype object
   Child.prototype.getY = function(){
       return this.y;
   };
   let c1 = new Child;
   console.log(c1); // Child {x: 100, y: 200}
   console.log(c1.__proto__); //{getY: ƒ} Method on the prototype of the subclass
   console.log(c1.__proto__.__proto__);// {getX: ƒ, constructor: ƒ} method and constructor on the parent prototype
Copy the code

Classes and inheritance in ES6

  • ES6 uses class to create classesThe constructor function writes methods and properties that are private to the instance, and external methods and properties that are public to the prototype
  • Note: Classes created using class cannot be executed as normal functions, only new can be executed
  • inheritance:Extend the class nameThe effect is similar to parasitic combinatorial inheritance.
    • Construtcor must add super() to construtCOR. Super is similar to the previous CALL.
   class Parent{
       constructor(){
           this.x = 100;
       }
       Parent.prototype.getx = function(){... }
       getX (){
       return this.x;
   };
   }
   class Child extends Parent{
       constructor(){
           super(a);// The effect of super is similar to that of CALL
           / / super (100200); Constructor (Parent); // Constructor (Parent)
           this.y = 200;
       }
       Parent.prototype.getY = function(){... }
       getY (){
       return this.y;
   	};
   }
Copy the code