js-实现继承的三种方式

继承

js中的继承是通过原型实现的。

方式一：将原型指向继承对象的原型

  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; // 指定原型对象为Animal 的原型
    let p1 = new People('张三');
    console.log(p1.age) // expect output 23  p1继承了age
    /***
    * 这样做引起一个问题，当修改通过p1 修改Person的原型时，同时也修改了Animal的原型
    **/
    p1.__proto__.age = 48;
    console.log(a.age)  // expect output 48   Animal 的原型被修改了

方式二： 指定原型对象为继承对象的一个实例

  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'); // 继承Animal
    let p2 = new People('wangermazi'); 
    p2.__proto__.age = 15;
    console.log(a.age) // expect output 23
    console.log(p2.age); // expect output 15
    /*
    * 解决了方式一存在的问题,同时方法三也能解决方式一存在的问题
    ***/

方式三：使用中转函数

   function Animal(name) {
        this.name =name;
    }
    Animal.prototype.age = 23;
    let a = new Animal('lily');
    function People(name) {
        this.name = name
    }
    function fn() {}; // 中转函数
    fn.prototype = Animal.prototype;
    People.prototype = new fn(); // 继承
    let p3 = new People('lisi');
    p3.__proto__.age = 48
    console.log(p3.age) // expect output 48
    console.log(a.age) // expect output 23
    

总结：因此继承一个函数，最好不要使用方式一（直接将原型指向要继承函数的原型）。实现bind函数会用到这个知识点