深入浅出JavaScript 原型链：对象继承的“隐形链条”-优快云博客

深入浅出JavaScript 原型链：对象继承的“隐形链条”

在 JavaScript 的世界里，原型链（Prototype Chain）是一个核心概念。它如同一条隐形的链条，连接着所有对象，使得代码能够高效地共享属性和方法。理解原型链，不仅能帮助你写出更优雅的代码，还能让你在调试时快速定位问题。

一、从“继承”说起：为什么需要原型链？

想象一个场景：你正在开发一个游戏，游戏中有无数个角色（比如战士、法师、弓箭手）。这些角色共享一些基础能力（如移动、攻击），但又有各自独特的技能。如果每个角色都单独定义这些基础能力，代码会变得冗余且难以维护。

原型链的作用就是解决这个问题。它通过对象之间的关联关系，让所有对象共享一套基础能力，从而节省内存并提高代码的可维护性。

二、原型链的核心：对象与原型

1. 每个对象都有一个原型

在 JavaScript 中，每个对象（除了 null）都有一个隐式原型（__proto__），它指向另一个对象——这个对象就是它的原型。原型本身也是一个对象，因此它也可以有自己的原型，形成一条链式结构。

const obj = {};
console.log(obj.__proto__); // 指向 Object.prototype

2. 构造函数的原型（prototype）

每个函数（包括构造函数）都有一个 prototype 属性，它指向一个对象。当用 new 调用构造函数时，新对象的 __proto__ 会指向这个 prototype。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
console.log(alice.__proto__ === Person.prototype); // true

3. 原型链的形成

当访问一个对象的属性或方法时，JavaScript 引擎会沿着对象的原型链向上查找，直到找到目标或到达原型链的尽头（null）。

// 原型链的结构
alice -> Person.prototype -> Object.prototype -> null

三、原型链的工作原理：属性查找的“接力赛”

1. 属性查找的流程

当你访问一个对象的属性时，JavaScript 会执行以下步骤：

检查对象自身：如果属性存在，直接返回。
沿原型链查找：如果对象自身没有该属性，则沿着 __proto__ 向上查找原型对象。
找到或返回 undefined：直到找到目标属性或到达原型链的尽头（null）。

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

const dog = new Animal('Buddy');
dog.speak(); // 输出 "Buddy makes a sound."

在这个例子中：

dog 对象自身没有 speak 方法。
JavaScript 引擎沿着 dog.__proto__（即 Animal.prototype）找到 speak 方法。

2. 动态性：修改原型会影响所有实例

原型链的动态性是其强大之处，也是潜在的陷阱。修改原型对象的属性或方法，所有实例都会受到影响。

// 修改原型上的方法
Animal.prototype.speak = function() {
  console.log(`${this.name} barks!`);
};

dog.speak(); // 输出 "Buddy barks!"

即使 dog 是在修改前创建的，它也会继承新的 speak 方法。

四、继承的实现：从构造函数到 ES6 的 class

1. 构造函数继承

通过将子类的原型设置为父类的实例，可以实现继承。

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 继承属性
  this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 继承方法
Child.prototype.constructor = Child;

const child = new Child('Lily', 12);
child.sayName(); // 输出 "Lily"

2. ES6 的 class 语法糖

ES6 的 class 本质上是原型继承的语法糖，简化了继承的实现。

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
  sayAge() {
    console.log(this.age);
  }
}

const child = new Child('DT', 1);
child.sayName(); // 输出 "DT"
child.sayAge();  // 输出 1

五、原型链的实际应用与注意事项

1. 共享方法，节省内存

通过原型链，多个实例可以共享同一个方法，而不是每个实例都保存一份副本。

function Circle(radius) {
  this.radius = radius;
}
Circle.prototype.getArea = function() {
  return Math.PI * this.radius ** 2;
};

const circle1 = new Circle(5);
const circle2 = new Circle(10);
console.log(circle1.getArea === circle2.getArea); // true

2. 原型链的终点：Object.prototype

所有对象的原型链最终都会指向 Object.prototype，这是 JavaScript 对象模型的起点。

console.log(Object.prototype.__proto__); // null

3. 避免原型污染

不要在 Object.prototype 上随意添加属性或方法，这可能导致所有对象意外继承这些属性，引发难以排查的错误。

六、总结：原型链的本质

原型链是 JavaScript 实现对象继承的核心机制。它通过对象之间的关联，让代码能够高效地共享属性和方法。理解原型链，不仅能帮助你写出更高效的代码，还能让你在面对复杂的对象关系时游刃有余。

关键点回顾：

每个对象都有原型，原型本身也是一个对象。
属性查找沿原型链向上进行。
构造函数的 prototype 是共享属性和方法的载体。
ES6 的 class 是原型继承的语法糖。
动态性和共享性是原型链的双刃剑，需谨慎使用。

七、延伸思考：原型链与现代 JavaScript

随着 ES6 的普及，class 和 extends 逐渐取代了传统的原型链写法，但它们的本质仍是原型继承。理解原型链，能让你更深入地掌握 JavaScript 的底层机制，并在面对性能优化、框架设计等场景时做出更合理的决策。

原型链如同 JavaScript 的“基因链”，它让语言具备了灵活的对象模型。掌握它，你将真正理解 JavaScript 的魅力所在。