JavaScript之非extends的组合继承怎么实现

在JavaScript中，继承是实现代码复用和扩展功能的重要手段。虽然ES6引入了class和extends关键字，使得继承的实现更加直观和简洁，但在某些场景下，我们可能需要使用非extends的方式来实现继承。本文将详细介绍如何通过组合继承的方式在JavaScript中实现继承，并探讨其优缺点。

1. 什么是组合继承

组合继承（Combination Inheritance）是一种结合了原型链继承和构造函数继承的继承方式。它通过调用父类构造函数来继承父类的属性，并通过将子类的原型对象指向父类的实例来继承父类的方法。这种方式既能够继承父类的属性，又能够继承父类的方法，是一种较为常用的继承方式。

2. 原型链继承

在介绍组合继承之前，我们先来回顾一下原型链继承的基本概念。

2.1 原型链继承的基本原理

在JavaScript中，每个对象都有一个内部属性[[Prototype]]，指向它的原型对象。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法为止。

原型链继承的基本思想是通过将一个对象的原型指向另一个对象的实例，从而实现继承。具体来说，我们可以通过以下方式实现原型链继承：

function Parent() {
    this.name = 'Parent';
}

Parent.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

function Child() {
    this.name = 'Child';
}

Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // 输出: Hello, Child

在上面的代码中，我们将Child的原型对象指向了Parent的实例，从而实现了Child对Parent的继承。当我们调用child.sayHello()时，JavaScript引擎会沿着原型链查找sayHello方法，最终在Parent.prototype上找到了该方法。

2.2 原型链继承的优缺点

优点：

• 简单易用，代码量少。
• 能够继承父类的属性和方法。

缺点：

• 所有子类实例共享同一个父类实例，如果父类实例中有引用类型的属性，那么这些属性会被所有子类实例共享，导致数据污染。
• 无法在子类构造函数中向父类构造函数传递参数。

3. 构造函数继承

为了解决原型链继承中共享引用类型属性导致的数据污染问题，我们可以使用构造函数继承。

3.1 构造函数继承的基本原理

构造函数继承的基本思想是在子类构造函数中调用父类构造函数，从而将父类的属性复制到子类实例中。具体来说，我们可以通过以下方式实现构造函数继承：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

function Child(name) {
    Parent.call(this, name);
}

const child1 = new Child('Child1');
const child2 = new Child('Child2');

child1.colors.push('yellow');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'yellow']
console.log(child2.colors); // 输出: ['red', 'blue', 'green']

在上面的代码中，我们在Child构造函数中调用了Parent.call(this, name)，从而将Parent的属性复制到了Child实例中。由于每个子类实例都有自己的colors属性，因此修改child1.colors不会影响到child2.colors。

3.2 构造函数继承的优缺点

优点：

• 每个子类实例都有自己的属性，不会共享父类实例的引用类型属性，避免了数据污染。
• 可以在子类构造函数中向父类构造函数传递参数。

缺点：

• 无法继承父类原型上的方法，只能继承父类构造函数中的属性。

4. 组合继承

为了解决原型链继承和构造函数继承各自的缺点，我们可以将两者结合起来，形成组合继承。

4.1 组合继承的基本原理

组合继承的基本思想是通过调用父类构造函数来继承父类的属性，并通过将子类的原型对象指向父类的实例来继承父类的方法。具体来说，我们可以通过以下方式实现组合继承：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

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

Child.prototype = new Parent(); // 继承方法
Child.prototype.constructor = Child; // 修复构造函数指向

const child1 = new Child('Child1', 10);
const child2 = new Child('Child2', 20);

child1.colors.push('yellow');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'yellow']
console.log(child2.colors); // 输出: ['red', 'blue', 'green']

child1.sayHello(); // 输出: Hello, Child1
child2.sayHello(); // 输出: Hello, Child2

在上面的代码中，我们首先在Child构造函数中调用了Parent.call(this, name)，从而将Parent的属性复制到了Child实例中。然后，我们将Child.prototype指向了new Parent()，从而继承了Parent原型上的方法。最后，我们修复了Child.prototype.constructor的指向，确保它指向Child。

4.2 组合继承的优缺点

优点：

• 既能够继承父类的属性，又能够继承父类的方法。
• 每个子类实例都有自己的属性，不会共享父类实例的引用类型属性，避免了数据污染。
• 可以在子类构造函数中向父类构造函数传递参数。

缺点：

• 每次创建子类实例时都会调用两次父类构造函数，一次是在Parent.call(this, name)时，另一次是在Child.prototype = new Parent()时。这会导致父类构造函数中的代码被执行两次，可能会影响性能。

5. 优化组合继承

为了解决组合继承中父类构造函数被调用两次的问题，我们可以使用寄生组合继承（Parasitic Combination Inheritance）。

5.1 寄生组合继承的基本原理

寄生组合继承的基本思想是通过创建一个空的构造函数来继承父类的原型，从而避免调用父类构造函数。具体来说，我们可以通过以下方式实现寄生组合继承：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

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

// 创建一个空的构造函数
function F() {}
// 将F的原型指向Parent的原型
F.prototype = Parent.prototype;
// 将Child的原型指向F的实例
Child.prototype = new F();
// 修复构造函数指向
Child.prototype.constructor = Child;

const child1 = new Child('Child1', 10);
const child2 = new Child('Child2', 20);

child1.colors.push('yellow');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'yellow']
console.log(child2.colors); // 输出: ['red', 'blue', 'green']

child1.sayHello(); // 输出: Hello, Child1
child2.sayHello(); // 输出: Hello, Child2

在上面的代码中，我们创建了一个空的构造函数F，并将其原型指向Parent.prototype。然后，我们将Child.prototype指向new F()，从而继承了Parent原型上的方法。由于F是一个空的构造函数，因此不会调用Parent构造函数，从而避免了父类构造函数被调用两次的问题。

5.2 寄生组合继承的优缺点

优点：

• 既能够继承父类的属性，又能够继承父类的方法。
• 每个子类实例都有自己的属性，不会共享父类实例的引用类型属性，避免了数据污染。
• 可以在子类构造函数中向父类构造函数传递参数。
• 避免了父类构造函数被调用两次的问题，性能更优。

缺点：

• 代码相对复杂，理解起来有一定难度。

6. 总结

在JavaScript中，继承是实现代码复用和扩展功能的重要手段。虽然ES6引入了class和extends关键字，使得继承的实现更加直观和简洁，但在某些场景下，我们可能需要使用非extends的方式来实现继承。组合继承是一种结合了原型链继承和构造函数继承的继承方式，它既能够继承父类的属性，又能够继承父类的方法，是一种较为常用的继承方式。

然而，组合继承也存在父类构造函数被调用两次的问题，这可能会影响性能。为了解决这个问题，我们可以使用寄生组合继承，通过创建一个空的构造函数来继承父类的原型，从而避免调用父类构造函数。

总的来说，组合继承和寄生组合继承都是JavaScript中常用的继承方式，它们各有优缺点，开发者可以根据具体的需求选择合适的继承方式。