JavaScript原型链继承

概述

原型链继承是JavaScript中实现对象间继承关系的核心机制。当访问一个对象的属性时，若该对象自身不存在该属性，JavaScript会沿着其原型链（prototype chain）向上查找，直到找到该属性或到达链的末端（`null`）。这种机制使得对象可以共享原型上的属性和方法，从而实现代码复用和继承。

原型与原型链基础

在JavaScript中，每个对象都有一个内部属性`Prototype`（可通过`__proto__`或`Object.getPrototypeOf()`访问）。构造函数（如`function Person() {}`）的`prototype`属性指向一个原型对象，该对象的`constructor`属性指回构造函数。

graph LR A[实例对象] -->|__proto__| B[构造函数的prototype] B -->|__proto__| C[Object.prototype] C -->|__proto__| D[null]

示例代码

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

• • 解释**：

1. `Dog`通过`Object.create(Animal.prototype)`继承`Animal`的原型方法。 2. `Animal.call(this, name)`确保父类属性被正确初始化。 3. 最终`dog`实例通过原型链访问到`speak`方法。

原型链的详细机制

属性查找顺序

JavaScript按以下顺序查找属性： 1. 对象自身属性。 2. 对象的`Prototype`（即`__proto__`）。 3. 递归步骤2，直到找到属性或`Prototype`为`null`。

原型链的终点

所有原型链最终指向`Object.prototype`，其`__proto__`为`null`。

实际应用场景

共享方法节省内存

通过将方法定义在原型上，所有实例共享同一方法，减少内存占用：

  
function User(name) { this.name = name; }  
User.prototype.greet = function() { console.log(`Hello, ${this.name}!`); };  

const user1 = new User('Alice');  
const user2 = new User('Bob');  
// user1和user2共享greet方法

扩展内置对象

通过修改原型链扩展内置对象功能（需谨慎使用）：

  
Array.prototype.last = function() { return this[this.length - 1]; };  
console.log([1, 2, 3].last()); // 输出: 3

注意事项

1. **性能问题**：过长的原型链会增加查找时间。 2. **意外覆盖**：修改原型会影响所有实例。 3. **构造函数重置**：继承时必须修正`constructor`属性（如`Dog.prototype.constructor = Dog`）。

进阶：组合继承与原型链

组合使用构造函数和原型链可解决引用类型共享问题：

  
function Parent() { this.colors = ['red', 'blue']; }  
function Child() { Parent.call(this); } // 继承属性  
Child.prototype = Object.create(Parent.prototype); // 继承方法  

const child1 = new Child();  
child1.colors.push('green');  
console.log(new Child().colors); // 输出: ["red", "blue"]（不共享colors）

总结

原型链继承是JavaScript面向对象编程的基石，理解其机制有助于编写高效、可维护的代码。通过合理利用原型共享和构造函数初始化，可以实现灵活的继承模式。