编辑“︁JavaScript组合继承”︁

= JavaScript组合继承 =

'''组合继承'''（Combination Inheritance）是JavaScript中一种结合了[[原型链继承]]和[[构造函数继承]]两种模式的继承方式，它通过调用父类构造函数来继承实例属性，又通过将父类实例作为子类原型来继承原型方法。这种模式避免了单一继承方式的缺陷，是JavaScript中最常用的继承模式之一。

== 概述 ==
组合继承的核心思想是：
* 使用'''构造函数继承'''实现实例属性的继承
* 使用'''原型链继承'''实现原型方法的继承

这样既保证了实例属性的独立性，又实现了方法的共享，同时还能识别对象类型（instanceof）。

== 实现原理 ==
组合继承的实现步骤通常为：
# 在子类构造函数中调用父类构造函数（使用call/apply）
# 将父类的实例作为子类的原型
# 修正子类原型的constructor指向

<mermaid>
classDiagram
    class Parent {
        +property1
        +method1()
    }
    class Child {
        +property2
        +method2()
    }
    Parent <|-- Child : 原型继承
    Child --> Parent : 构造函数调用
</mermaid>

== 代码实现 ==

以下是组合继承的典型实现示例：

<syntaxhighlight lang="javascript">
// 父类
function Animal(name) {
    this.name = name || 'Unknown Animal';
    this.colors = ['black', 'white'];
}

// 父类原型方法
Animal.prototype.sayName = function() {
    console.log("My name is " + this.name);
};

// 子类
function Dog(name, breed) {
    // 1. 构造函数继承 - 继承实例属性
    Animal.call(this, name);  // 第二次调用父类构造函数
    this.breed = breed || 'Unknown Breed';
}

// 2. 原型链继承 - 继承原型方法
Dog.prototype = new Animal();  // 第一次调用父类构造函数
// 3. 修正constructor指向
Dog.prototype.constructor = Dog;

// 子类原型方法
Dog.prototype.bark = function() {
    console.log(this.name + " says: Woof!");
};

// 测试代码
var dog1 = new Dog('Max', 'Golden Retriever');
dog1.colors.push('brown');
dog1.sayName();  // "My name is Max"
dog1.bark();     // "Max says: Woof!"
console.log(dog1.colors);  // ["black", "white", "brown"]

var dog2 = new Dog('Bella', 'Poodle');
console.log(dog2.colors);  // ["black", "white"] (不受dog1影响)
</syntaxhighlight>

'''输出结果:'''
<pre>
My name is Max
Max says: Woof!
["black", "white", "brown"]
["black", "white"]
</pre>

== 优势分析 ==
组合继承的主要优点包括：
* '''实例属性独立'''：每个实例有自己的属性副本，不会相互影响
* '''方法共享'''：所有实例共享原型上的方法，节省内存
* '''类型识别'''：instanceof和constructor都能正确识别对象类型
* '''参数传递'''：子类可以向父类构造函数传递参数

== 潜在问题 ==
虽然组合继承是经典模式，但仍存在一个小缺点：
* 父类构造函数会被调用两次（代码中已标注）
** 第一次在设置子类原型时（<code>Dog.prototype = new Animal()</code>）
** 第二次在创建子类实例时（<code>Animal.call(this, name)</code>）

这会导致子类原型上有一组多余的父类实例属性（可通过[[寄生组合继承]]优化）。

== 实际应用案例 ==

组合继承非常适合需要：
* 创建具有共同特征但又需要个性化定制的对象
* 构建UI组件库（如按钮、表单控件等）
* 实现游戏中的实体继承体系

=== 表单控件示例 ===
<syntaxhighlight lang="javascript">
// 基础表单控件
function FormControl(name, label) {
    this.name = name;
    this.label = label || '';
    this.value = '';
}

FormControl.prototype.render = function() {
    return `<div class="form-control">
        <label>${this.label}</label>
        <input type="text" name="${this.name}" value="${this.value}">
    </div>`;
};

// 扩展为数字输入框
function NumberInput(name, label, min, max) {
    FormControl.call(this, name, label);  // 继承属性
    this.min = min || 0;
    this.max = max || 100;
}

// 继承方法
NumberInput.prototype = new FormControl();
NumberInput.prototype.constructor = NumberInput;

// 重写render方法
NumberInput.prototype.render = function() {
    return `<div class="number-input">
        <label>${this.label}</label>
        <input type="number" name="${this.name}" 
               value="${this.value}" min="${this.min}" max="${this.max}">
    </div>`;
};

// 使用示例
var ageInput = new NumberInput('age', 'Your Age', 18, 120);
console.log(ageInput.render());
</syntaxhighlight>

== 数学表示 ==
组合继承可以表示为：
<math>
Child = (Parent_{constructor} \oplus Child_{own}) \cup Parent_{prototype}
</math>
其中：
* <math>\oplus</math> 表示属性合并
* <math>\cup</math> 表示原型链连接

== 总结 ==
组合继承是JavaScript中最实用、最易理解的继承模式之一，它：
* 完美结合了构造函数继承和原型链继承的优点
* 适合大多数面向对象编程场景
* 虽然有小缺陷，但完全不影响日常使用
* 是理解更高级继承模式（如寄生组合继承）的基础

对于初学者，建议先掌握组合继承，再学习其他优化模式。在实际项目中，组合继承能满足90%以上的继承需求。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript面向对象编程]]