JavaScript -- 组合继承

分手后的思念是犯贱 2022-04-04 10:16 300阅读 0赞

使用原型链来实现继承，看如下代码

function SuperType(){ 
        this.colors = ["red", "blue", "green"]; 
    } 
    
    function SubType() {
    }
    
    SubType.prototype = new SuperType();
    
    const s1 = new SubType();
    const s2 = new SubType();
    s1.colors.push("black");
    console.log(s2.colors);

这是一个很简单的继承，Subtype继承了SuperType的属性，看似没有问题。

![20181216154009267.png][]

不能发现，s1和s2有了关联，这是因为它们的colors数组是相同的，这是我们很不希望看到的。

所以，有了下面的改进版本。

function SuperType(){ 
        this.colors = ["red", "blue", "green"]; 
    } 
    
    function SubType() {
        SuperType.call(this);
    }
    
    SubType.prototype = new SuperType();
    
    const s1 = new SubType();
    const s2 = new SubType();
    s1.colors.push("black");
    console.log(s2.colors);

我们在子类型构造函数的内部调用超类型构造函数.使得SubType 的每个实例就都会具有自己的 colors 属性的副本了。

![2018121615461112.png][]

这样就没错了，属性必须是自己独立拥有，不能共享，但是方法确实可以的。

So?

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

组合继承：其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

[20181216154009267.png]: /images/20220404/ab60296803e340649d758ad670845ddd.png
[2018121615461112.png]: /images/20220404/7a9785941ca74d07a1c614ec81f691b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220404/3ceb57b3dc984edf81c749d9afce7f48.png