JS inheritance

Inherit

js Inheritance in is implemented through prototypes .

Mode one ： Point the prototype to the prototype of the inherited object

  function Animal(name) {
    
        this.name =name;
    }
    Animal.prototype.age = 23;
    let a = new Animal('lily');
    function People(name) {
    
        this.name = name
    }
    People.prototype = Animal.prototype; //  Specify the prototype object as Animal  The prototype of the 
    let p1 = new People(' Zhang San ');
    console.log(p1.age) // expect output 23 p1 Inherited age
    /*** *  This raises a problem , When the modification is passed p1  modify Person The prototype of , It was also modified Animal The prototype of the  **/
    p1.__proto__.age = 48;
    console.log(a.age)  // expect output 48 Animal  The prototype has been modified 

Mode two ： Specify the prototype object as an instance of the inherited object

  function Animal(name) {
    
        this.name =name;
    }
    Animal.prototype.age = 23;
    let a = new Animal('lily');
    function People(name) {
    
        this.name = name
    }
    People.prototype = new Animal('dog'); //  Inherit Animal
    let p2 = new People('wangermazi'); 
    p2.__proto__.age = 15;
    console.log(a.age) // expect output 23
    console.log(p2.age); // expect output 15
    /* *  Solved the problem of mode one , At the same time, method 3 can also solve the problems existing in method 1  ***/

Mode three ： Use transfer function

   function Animal(name) {
    
        this.name =name;
    }
    Animal.prototype.age = 23;
    let a = new Animal('lily');
    function People(name) {
    
        this.name = name
    }
    function fn() {
    }; //  Transfer function 
    fn.prototype = Animal.prototype;
    People.prototype = new fn(); //  Inherit 
    let p3 = new People('lisi');
    p3.__proto__.age = 48
    console.log(p3.age) // expect output 48
    console.log(a.age) // expect output 23
    

summary ： So inherit a function , It's best not to use mode 1 （ Direct the prototype to the prototype of the function to be inherited ）. Realization bind Function will use this knowledge point