JavaScript 原型链

JavaScript 通过原型链实现继承，是理解面向对象机制的核心。

原型对象

每个函数都有 prototype 属性，指向原型对象。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const person = new Person('Alice');
person.sayHello(); // Hello, I'm Alice

原型链查找

访问对象属性时，沿原型链向上查找：

person.name;           // 自身属性
person.sayHello();     // Person.prototype 上
person.toString();     // Object.prototype 上

查找顺序：自身 → 构造函数原型 → Object.prototype → null

原型链图示

person
  └── __proto__ → Person.prototype
                    └── __proto__ → Object.prototype
                                      └── __proto__ → null

继承实现

原型链继承

function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

ES6 class 继承

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

核心属性对比

常见陷阱

// 错误：直接赋值覆盖原型
Dog.prototype = Animal.prototype; // 错误！两者指向同一对象

// 正确：创建新对象
Dog.prototype = Object.create(Animal.prototype);

// 注意：修改原型影响所有实例
Person.prototype.greet = function() {}; // 所有实例都能访问

原型链终点是 null，Object.prototype.__proto__ === null

要点总结

• 每个对象都有 __proto__，指向构造函数的 prototype
• 属性查找沿原型链向上，直到 null
• 继承推荐使用 Object.create() 或 ES6 extends
• 修改原型会影响所有实例