js 怎么实现组合继承

组合继承是一种结合了原型链继承和构造函数继承两者优点的继承方式。它通过调用父类构造函数来继承父类的属性，并通过将子类的原型指向父类的实例来继承父类的方法。这种方式解决了单纯使用原型链继承导致的共享属性问题，也解决了单独使用构造函数继承导致的方法无法复用的问题。组合继承的核心步骤包括：调用父类构造函数、设置子类原型为父类实例、修正子类构造函数指向。下面将详细描述其中一个核心步骤：设置子类原型为父类实例。

通过将子类的原型设置为父类的实例，可以确保子类实例能够访问父类原型上的方法和属性。这种方式不仅能够复用父类的方法，还能避免多个子类实例之间共享引用类型属性的问题。

一、组合继承的基本实现

组合继承主要包括两步：调用父类构造函数和设置子类原型。以下是一个组合继承的基本实现示例：

// 父类
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayName = function() {
    console.log(this.name);
};
// 子类
function Child(name, age) {
    // 继承父类属性
    Parent.call(this, name);
    this.age = age;
}
// 继承父类方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.sayAge = function() {
    console.log(this.age);
};
// 测试
const child1 = new Child('John', 18);
child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
child1.sayName(); // John
child1.sayAge(); // 18
const child2 = new Child('Jane', 20);
console.log(child2.colors); // ['red', 'blue', 'green']
child2.sayName(); // Jane
child2.sayAge(); // 20

二、调用父类构造函数继承属性

调用父类构造函数是组合继承的第一步。通过在子类构造函数中调用父类构造函数，可以继承父类的实例属性。具体实现是使用 Parent.call(this, name) 这种方式：

function Child(name, age) {
    // 继承父类属性
    Parent.call(this, name);
    this.age = age;
}

这样做的好处是，每个子类实例都有自己的父类实例属性副本，不会共享引用类型的属性。

三、设置子类原型继承父类方法

为了让子类继承父类的方法，需要将子类的原型设置为父类的实例。具体实现如下：

Child.prototype = new Parent();
Child.prototype.constructor = Child;

这种做法确保了子类原型上有父类原型的方法，同时修正了子类构造函数的指向。

四、修正子类构造函数指向

在设置子类原型时，子类的构造函数会被重置为父类的构造函数。因此，需要手动修正子类的构造函数指向：

Child.prototype.constructor = Child;

这一步非常重要，否则在创建子类实例时，instanceof 操作可能会出现问题。

五、组合继承的优点和缺点

优点：

避免共享属性问题：每个子类实例都有自己的父类属性副本。
方法复用：子类可以复用父类原型上的方法，节省内存。
灵活性高：可以在子类中添加独有的方法和属性。

缺点：

调用两次父类构造函数：在创建子类实例时，父类构造函数会被调用两次，分别是在继承属性和设置原型时。这会导致性能开销。

六、实际应用中的注意事项

在实际应用中，组合继承是一种常用的继承方式，但要注意以下几点：

避免过度继承：继承层次过多会导致代码复杂度增加，应根据具体需求选择合适的继承方式。
使用ES6类语法：在现代JavaScript开发中，建议使用ES6类语法来实现继承，更加简洁和易读。

七、ES6中的组合继承

在ES6中，可以使用 class 关键字来实现更加简洁的组合继承。以下是一个ES6实现的示例：

class Parent {
    constructor(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green'];
    }
    sayName() {
        console.log(this.name);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name); // 继承父类属性
        this.age = age;
    }
    sayAge() {
        console.log(this.age);
    }
}
// 测试
const child1 = new Child('John', 18);
child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
child1.sayName(); // John
child1.sayAge(); // 18
const child2 = new Child('Jane', 20);
console.log(child2.colors); // ['red', 'blue', 'green']
child2.sayName(); // Jane
child2.sayAge(); // 20

通过使用 class 关键字和 extends 继承，代码更加简洁和易读，同时也避免了手动修正构造函数指向的问题。

八、总结

组合继承是一种结合原型链继承和构造函数继承的继承方式，既能避免共享属性问题，又能实现方法复用。通过调用父类构造函数继承属性，并设置子类原型为父类实例，组合继承在实际应用中具有很高的灵活性和实用性。在现代JavaScript开发中，建议使用ES6类语法来实现继承，使代码更加简洁和易读。