JS高级（10）—— 继承模式

「爱情、让人受尽委屈。」 2022-12-23 06:56 92阅读 0赞

#### 方式1：原型链继承 ####

*  套路
    
    1.  定义父类型构造函数
    2.  给父类型的原型添加方法
    3.  定义子类型的构造函数
    4.  创建父类型的对象赋值给子类型的原型
    5.  将子类型原型的构造属性设置为子类型
    6.  给子类型原型添加方法
    7.  创建子类型的对象: 可以调用父类型的方法
 *  关键
    
     *  子类型的原型为父类型的一个实例对象

//父类型
    function Supper() { 
      this.supProp = 'Supper property'
    }
    Supper.prototype.showSupperProp = function () { 
      console.log(this.supProp)
    };
    
    //子类型
    function Sub() { 
      this.subProp = 'Sub property'
    }
    
    // 子类型的原型为父类型的一个实例对象
    Sub.prototype = new Supper();
    // 让子类型的原型的constructor指向子类型
    Sub.prototype.constructor = Sub;
    Sub.prototype.showSubProp = function () { 
      console.log(this.subProp)
    };
    
    var sub = new Sub();
    sub.showSupperProp();
    sub.showSubProp();
    
    console.log(sub)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
可真复杂，看得我头都要大了。下图来自视频截图，按着原型链找就找着了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

#### 方式2：借用构造函数继承(假的) ####

*  套路:
    
    1.  定义父类型构造函数
    2.  定义子类型构造函数
    3.  在子类型构造函数中调用父类型构造
 *  关键:
    
     *  在子类型构造函数中通用 call() 调用父类型构造函数

function Person(name, age) { 
    this.name = name;
      this.age = age
    }
    function Student(name, age, price) { 
      Person.call(this, name, age);  // 相当于: this.Person(name, age)
      this.price = price
    }
    
    var s = new Student('Tom', 20, 14000);
    console.log(s.name, s.age, s.price);

![在这里插入图片描述][20201123171314288.png_pic_center]

#### 方式3：原型链+借用构造函数的组合继承 ####

1.  利用原型链实现对父类型对象的方法继承
2.  利用 call() 借用父类型构建函数初始化相同属性

![在这里插入图片描述][20201123171957512.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e73a1ca3d5a047bda8dda6c8a54d6fb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/53ff2716db2047a89ddef5a36c2c0e1d.png
[20201123171314288.png_pic_center]: /images/20221120/3fa3fd88682d4034ad81a1620e226fbd.png
[20201123171957512.png_pic_center]: /images/20221120/7b7f2edfc9024306ba71a992d6011776.png