编辑“︁JavaScript构造函数继承”︁

= JavaScript构造函数继承 =

== 介绍 ==  
'''JavaScript构造函数继承'''是面向对象编程（OOP）中实现代码复用的核心机制之一。它允许子类继承父类的属性和方法，同时支持扩展或重写父类的功能。在JavaScript中，构造函数继承主要通过原型链（Prototype Chain）和构造函数调用（Constructor Invocation）实现。  

JavaScript的继承机制与其他语言（如Java或C++）不同，因为它基于原型而非类。理解构造函数继承是掌握JavaScript OOP的关键步骤。

== 基本概念 ==  
构造函数继承的核心思想是：  
1. 子类通过调用父类的构造函数来初始化父类的属性。  
2. 子类的原型对象指向父类的实例，以继承父类的方法。  

=== 原型链继承 ===  
原型链是JavaScript实现继承的基础。当访问对象的属性或方法时，如果当前对象没有定义，JavaScript会沿着原型链向上查找。

<mermaid>
graph LR
    A[子类实例] --> B[子类.prototype]
    B --> C[父类.prototype]
    C --> D[Object.prototype]
    D --> null
</mermaid>

== 实现方式 ==  

=== 1. 原型链继承 ===  
通过将子类的原型对象设置为父类的实例来实现继承。

<syntaxhighlight lang="javascript">
// 父类
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

// 子类
function Dog(name) {
    this.name = name;
}
Dog.prototype = new Animal(); // 继承父类

const dog = new Dog('Rex');
dog.speak(); // 输出: "Rex makes a noise."
</syntaxhighlight>

'''问题'''：  
- 所有子类实例共享父类的引用属性（如数组或对象），可能导致意外修改。  
- 无法向父类构造函数传递参数。

=== 2. 构造函数继承（借用构造函数） ===  
在子类构造函数中调用父类构造函数，使用`call`或`apply`绑定`this`。

<syntaxhighlight lang="javascript">
function Animal(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}

function Dog(name) {
    Animal.call(this, name); // 继承父类属性
}

const dog1 = new Dog('Rex');
dog1.colors.push('green');
console.log(dog1.colors); // 输出: ["red", "blue", "green"]

const dog2 = new Dog('Max');
console.log(dog2.colors); // 输出: ["red", "blue"] （不共享colors）
</syntaxhighlight>

'''优点'''：  
- 解决引用属性共享问题。  
- 支持向父类传递参数。  

'''缺点'''：  
- 无法继承父类原型上的方法。

=== 3. 组合继承（经典继承） ===  
结合原型链继承和构造函数继承，既继承属性又继承方法。

<syntaxhighlight lang="javascript">
function Animal(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name); // 继承属性
}
Dog.prototype = new Animal(); // 继承方法

const dog = new Dog('Rex');
dog.speak(); // 输出: "Rex makes a noise."
</syntaxhighlight>

'''优点'''：  
- 解决引用属性共享问题。  
- 继承父类原型方法。  

'''缺点'''：  
- 父类构造函数被调用两次（`Animal.call`和`new Animal()`），效率略低。

=== 4. 寄生组合继承（最优方案） ===  
通过`Object.create`优化组合继承，避免重复调用父类构造函数。

<syntaxhighlight lang="javascript">
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype); // 只继承原型
Dog.prototype.constructor = Dog; // 修复构造函数指向

const dog = new Dog('Rex');
dog.speak(); // 输出: "Rex makes a noise."
</syntaxhighlight>

'''优点'''：  
- 高效且无副作用。  
- 现代JavaScript库（如React）的推荐方式。

== 实际应用案例 ==  
'''场景'''：构建一个图形编辑器，支持多种形状（如圆形、矩形）的绘制和计算面积。

<syntaxhighlight lang="javascript">
function Shape(color) {
    this.color = color;
}
Shape.prototype.getArea = function() {
    throw new Error('Method not implemented.');
};

function Circle(color, radius) {
    Shape.call(this, color);
    this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
Circle.prototype.getArea = function() {
    return Math.PI * this.radius ** 2;
};

const circle = new Circle('red', 5);
console.log(circle.getArea()); // 输出: 78.53981633974483
</syntaxhighlight>

== 数学公式支持 ==  
圆形面积公式：  
<math>Area = \pi r^2</math>  

== 总结 ==  
| 继承方式          | 优点                                      | 缺点                                      |
|-------------------|------------------------------------------|------------------------------------------|
| 原型链继承        | 简单易用                                 | 共享引用属性，无法传参                   |
| 构造函数继承      | 解决引用共享问题，支持传参               | 无法继承原型方法                         |
| 组合继承          | 兼顾属性和方法继承                       | 父类构造函数调用两次                     |
| 寄生组合继承      | 高效无副作用，现代最佳实践               | 实现稍复杂                               |

掌握构造函数继承是理解JavaScript OOP的核心。推荐使用'''寄生组合继承'''作为默认方案。

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