JavaScript构造函数继承

JavaScript构造函数继承

介绍

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

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

基本概念

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

原型链继承

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

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

实现方式

1. 原型链继承

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

// 父类
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."

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

2. 构造函数继承（借用构造函数）

在子类构造函数中调用父类构造函数，使用`call`或`apply`绑定`this`。

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）

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

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

3. 组合继承（经典继承）

结合原型链继承和构造函数继承，既继承属性又继承方法。

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."

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

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

4. 寄生组合继承（最优方案）

通过`Object.create`优化组合继承，避免重复调用父类构造函数。

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."

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

实际应用案例

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

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

数学公式支持

圆形面积公式： $Area=\pi r^2$

总结

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

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