JS继承

ゞ浴缸里的玫瑰 2022-12-05 00:50 175阅读 0赞

1.原型链继承  
2.借用构造函数继承（经典继承）  
3.组合继承  
4.原型式继承  
5.寄生式继承  
6.寄生组合式继承

既然要实现继承，那么首先我们得有一个父类（超类），代码如下：  
![在这里插入图片描述][20200909105305973.png_pic_center]

## 1.原型链继承 ##

**原型链继承**是通过 将一个类型的实例赋值给另一个构造函数的原型实现的。这样**子类型就可以访问超类型的所有属性和方法**。不适合单独使用。

![在这里插入图片描述][20200909105332492.png_pic_center]  
**核心： 将父类的实例作为子类的原型**

**特点**：实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）  
　  
**缺点**：1、在创建子类型的实例时，无法向父类构造函数**传参**。  
　　　　　2、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，**一个实例修改了原型属性，另一个实例的原型属性也会被修改！**）

## 2.借用构造函数继承（经典继承） ##

解决这个问题（原型链继承缺点1、2）的是 **借用构造函数**，即在子类型构造函数的内部调用超类型构造函数。这样就可以做到**每个实例都具有自己的属性**，同时还能保证 只使用构造函数模式来定义类型。  
![在这里插入图片描述][20200909105900618.png_pic_center]  
**重点**：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

**特点**：1、**只继承了父类构造函数的属性，没有继承父类原型的属性**。  
　 2、在子实例中可向父实例**传参**。  
　3、可以继承多个构造函数属性（call多个）。  
　　  
　　　  
**缺点**：**无法实现构造函数的复用**。（每次用每次都要重新调用）

## 3.组合继承 ##

**组合继承**，**使用原型链继承共享属性和方法，而通过借用构造函数来继承实例的属性。**  
解决了继承中的引用值类型共享物理空间的问题，但是没法实现方法的共享

![在这里插入图片描述][20200909110012243.png_pic_center]  
**重点**：结合了两种模式的优点，**传参和复用**

**特点**：1、可以继承父类原型上的属性，**可以传参，可复用**。  
　　　2、每个**新实例引入的构造函数属性是私有的**。  
　　　  
**缺点**：**多次调用父类构造函数（耗内存**），子类的构造函数会代替原型上的那个父类构造函数。

## 4.原型式继承 ##

**原型式继承**，**可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅复制**。而复制得到的副本还可以得到进一步改造。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70_pic_center]  
**重点**：\*\*用一个函数包装一个对象，然后返回这个函数的调用，\*\*这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

**特点**：**类似于复制一个对象，用函数来包装**。

**缺点**：1、所有实例都会继承原型上的属性。  
　　　2、**无法实现复用**。（新实例属性都是后面添加的）

## 5.寄生式继承 ##

**寄生式继承**，与原型式非常相似，也是**基于某个对象或者某些信息创建一个对象，然后增强对象，最后返回对象**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70_pic_center 1]  
**重点**：就是给原型式继承外面套了个壳子。

**优点**：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。

**缺点**：没用到原型，**无法复用**。

## 6.寄生组合继承 ##

为了解决组合继承模式由于**多次调用超类型构造函数而导致的低效率问题**，可以将这个模式与组合继承一起使用

**寄生组合继承**，集**寄生式继承**和**组合继承**的优点于一身，是实现基于类型继承最有效的方式

**重点**：**修复了组合继承的问题**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70_pic_center 2]

[20200909105305973.png_pic_center]: /images/20221123/cdb12d8380a44e10b2f9ecaca25a810f.png
[20200909105332492.png_pic_center]: /images/20221123/ad6d8b5557ca4a0d8c45d2bf89caaf89.png
[20200909105900618.png_pic_center]: /images/20221123/5028c915738e407abf1549dd83884e09.png
[20200909110012243.png_pic_center]: /images/20221123/e5ef93dd26484d18aadbb1c1289a41a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c3d510017fbd49f1a01319f2e12329d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/9114cffa402a4046b88d7fe70a7dc00d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f294530c80ad453b9f86e451df34dd35.png