js的继承模式

痛定思痛。 2022-12-22 11:07 168阅读 0赞

### 文章目录 ###

一、前言

相信很多人在遇到面试中都遇到过被问到过JavaScript继承模式的问题，都能手写出几种继承模式的代码例子，但为什么面试官却对你的回答不是很满意或者压根就没听懂，个人觉得应该是缺少自己的一个答题的思路。

--------------------

二、答题技巧

*  第一，按照几种继承模式的从最次的继承模式到最佳的继承模式的顺序去讲
 *  第二，讲出当前这种继承模式的利弊，相对前一种继承模式解决了什么问题，最关键的代码部分在哪里

以下着重讲一下几种常见的几种继承模式

--------------------

三、原型链继承

> 代码示例

function Parent (sex) { 
        this.sex = sex
    }
    
    Parent.prototype.setSex = function () { }
    
    function Son (name) { 
        this.name = name
    }
    
    Son.prototype = new Parent()
    var s1 = new Son('DBCDouble')
    console.log(s1)

> 结果打印  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left]

**关键**：把**子类的原型**指向**父类的实例**，从而**继承父类**的私有属性和**原型属性**

**优点：**

*  父类新增原型属性和方法，子类实例都能访问到
 *  简单、易用

**缺点：**

*  无法实现**多继承**（一个子类继承成多个父类）
 *  创建子类实例的时候，无法向**父类构造函数传参**
 *  有子类实例共享**父类引用属性**的问题（因为子类的原型指向的是父类的一个实例，假如父类的私有属性有一个是数组(引用类型)，那么任一子类都可以操作这个数组，从而导致其他子类使用的这个数组也会发生变化）

--------------------

四、借用父类构造函数继承

> 代码示例

function Parent (sex) { 
        this.sex = sex
    }
    
    Parent.prototype.setSex = function () { }
    
    function Son (name, age, sex) { 
        Parent.call(this, sex)
        this.name = name
        this.age = age
    }
    var s1 = new Son('DBCdouble', 25, '男')
    console.log(s1)

> 结果打印

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 1]  
**关键：在子类构造函数中使用call或者apply调用父类构造函数**实现父类私有属性继承（函数复用）

**优点：**

*  创建子类实例时，可以向**父类传递参数**
 *  可以实现**多继承**（在子类构造函数调用多个父类构造函数）
 *  解决了原型链继承中子类实例共享父类引用属性的问题（即使父类构造函数中有引用类型，在创建子类实例时，都会重新调用父类构造函数重新创建一份这个引用类型数据，重新申请引用类型的空间）

**缺点：**

*  每次创建子类实例时，**都要调用**一次父类构造函数，**影响性能**
 *  只继承父类的**实例属性(私有属性)**，没有继承父类的**原型属性**

--------------------

五、组合式继承(原型链继承 + 借用构造函数继承)

> 代码示例

function Parent (sex) { 
        this.sex = sex
    }
    
    Parent.prototype.setSex = function () { }
    
    function Son (name, age, sex) { 
        Parent.call(this, sex)
        this.name = name
        this.age = age
    }
    Son.prototype = Object.create(Parent.prototype)
    Son.prototype.constructor = Son
    var s1 = new Son('DBCdouble', 25, '男')
    console.log(s1)

> 打印结果  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 2]  
> **关键：通过调用父类构造函数**，继承父类的属性并**保留传参**的优点，并通过**Object.create(Parent.prototype)来创建继承了父类原型属性的对象，并把这个对象赋给子类的原型，这样的话，既能保证父类构造函数不用执行两次**，又能让子类能继承到**父类的原型方法**

**优点：**  
创建子类实例时，可以向**父类传递参数**  
可以实现**多继承**（在子类构造函数调用多个父类构造函数）  
解决了原型链继承中子类实例**共享父类引用属性**的问题（即使父类构造函数中有引用类型，在创建子类实例时，都会**重新调用**父类构造函数**重新创建一份**这个引用类型数据，**重新申请引用类型的空间**）  
父类构造函数只用**执行一次**

--------------------

六、ES6的class继承  
ES6中引入了**class关键字**，class可以通过extends关键字实现继承，还可以通过**static**关键字定义类的静态方法，这比 ES5 的通过修改原型链实现继承，要**清晰和方便**很多。

> 注意：ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

> 代码示例

class A { 
      constructor (sex) { 
        this.sex = sex
      }
      showSex () { 
        console.log('这里是父类的方法')
      }
    }
    
    class B extends A { 
      constructor (name, age, sex) { 
        super(sex);
        this.name = name;
        this.age = age;
      }
    
      showSex () { 
        console.log('这里是子类的方法')
      }
    }
    
    const b = new B('DBCDOUBLE', 25, '男')
    console.log(b);

> 打印结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 3]  
关键：使用**extends**关键字继承父类的原型属性，调用**super**来继承父类的实例属性，且**保留向父类构造函数传参**的优点  
**优点：简单易用，不用自己来修改原型链来完成继承**  
我们通过将代码从ES6编译到ES5来看看到底，class继承的代码最终会被编译成什么样，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 4]  
从上图分析得到：

*  上述代码示例中的**super**指的就是**父类构造函数**
 *  子类继承父类的**实例属性**最终还是通过**call或者apply**来实现继承的
 *  通过**extends**方法的调用来**修改子类和父类的原型链关系**  
    再看经过**编译后的extends**方法，如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 5]

> 1、注意Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部\[\[Prototype\]\]属性）到另一个对象或 null。  
> 2、(.prototype = b.prototype, new ())表达式的执行执行顺序是先执行前者，再返回后者

从上图可知，extends做了以下几件事：

*  定义了一个function \_\_() \{\}函数，并把该函数的constructor指向了子类
 *  紧接着，把function \_\_() \{\} 函数的原型指向了父类的原型
 *  最后再把function () \{\} 函数的实例赋给了子类函数，就这样子类的实例就能沿着proto.proto获取到父类的原型属性了，这种继承模式俗称圣杯模式

--------------------

—Ending—

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left]: /images/20221120/15c4b2fbbc6a4402bb037a1bf1efed27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221120/53c3f0cf5233473b995b12ceeccfbf99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221120/022aff56c42d45b58f2c80c9268fb53c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20221120/2cd5cfc915174c40b216e9d62f4891c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 4]: /images/20221120/5f732b828f0a43c5bdf06a784004b4f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 5]: /images/20221120/635cf5ed81a24b3187ae0bd6de727cd4.png