JavaScript原型链机制图解：彻底搞懂对象继承原理

一、核心三角基石：构造函数、实例与原型对象

很多初学者容易将构造函数的 prototype 属性与对象实例的 __proto__（即规范中的 [[Prototype]]）混为一谈。理解原型继承的第一步，是梳理清构造函数（Constructor）、实例对象（Instance）以及原型对象（Prototype Object）之间的三角支撑关系：

• 构造函数 (Constructor)：任何使用 function 声明的普通函数或构造函数，在创建时引擎都会为其自动挂载一个公开的 prototype 属性。
• 原型对象 (Prototype)：即 Constructor.prototype 指向的对象实体，用于存放该类型所有实例共享的方法与常量。原型对象自身默认含有一个反向指针 constructor，精准指回其宿主构造函数。
• 实例对象 (Instance)：通过 new Constructor() 运算创建出的对象实体。实例对象自身没有 prototype 属性，但拥有一个隐藏的内部槽位 [[Prototype]]（浏览器中通常以 __proto__ 暴露），它在创建瞬间便被固化指向构造函数的 prototype 对象。

function Person(name) {
  this.name = name; // 实例独有属性
}

// 在原型对象上定义共享方法
Person.prototype.sayHi = function() {
  return "你好，我是 " + this.name;
};

const tom = new Person("Tom");

// 验证三角指针映射关系
console.log(tom.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(Object.getPrototypeOf(tom) === Person.prototype); // true

二、原型链寻址算法与属性遮蔽

当执行 tom.sayHi() 时，JavaScript 引擎并不会假定 sayHi 一定存在于 tom 对象自身。查找算法的实际决策逻辑分为明确的四步阶段：

1. 自有属性检查：首先检索当前对象实例的本地内存空间（即 tom.hasOwnProperty('sayHi')）。若存在，则直接返回并执行，流程结束。
2. 原型向上跃迁：若自身不存在，引擎提取该对象的隐式原型引用（通过 Object.getPrototypeOf(tom)）。
3. 终点终止校验：判断当前获取的原型是否为 null。如果已是 null，代表整条原型链已检索完毕仍未命中，立即返回 undefined（若以函数方式调用则抛出 TypeError）。
4. 循环遍历：若原型不为 null，则将当前指针切换为该原型对象，重新执行属性比对。只要发现属性即刻命中退出，形成“就近原则”。

三、原型链的终点与顶层架构全景

很多开发者产生疑惑：既然 Person.prototype 本身也是一个对象，那它的原型又是谁？原型链究竟在何处终止？

在 JavaScript 中，除 Object.create(null) 显式指定外，普通对象均直接或间接衍生自 Object.prototype。作为语言的基石，Object.prototype 提供了诸如 toString()、valueOf()、hasOwnProperty() 等通用方法。而 Object.prototype.__proto__ === null，这就是规范定义的原型链终点。

更进一步，函数在 JavaScript 中属于一等公民对象（Function Object）。构造函数 Person 自身也是一个对象，它的隐式原型指向 Function.prototype，而 Function.prototype 的隐式原型最终又指回 Object.prototype。由此，语言构成了自洽而完整的网状架构：

四、对象继承模式的演进与对比

搞清楚了原型链的串联逻辑，再看 JavaScript 的“类与继承”，就会发现社区多年来的技术方案演进，完全是在围绕“如何优雅且无副作用地拼装原型链”这一问题展开：

继承方式	实现核心语法	主要缺陷 / 代价	适用与评价
原型链继承	Child.prototype = new Parent()	原型上的引用类型被所有实例共享修改；创建子类实例时无法向父类构造函数传参。	早期探索，已废弃
借用构造函数继承	Parent.call(this, ...args)	只能继承父类构造函数中声明的自有属性；无法继承父类 prototype 上定义的方法。	不完整方案
组合继承	借用构造函数 + 原型链继承结合	父类构造函数被强制调用了两次（实例化一次，原型赋值一次），浪费内存。	传统通用解法
寄生组合式继承	Object.create(Parent.prototype) + call	仅需手动修正 constructor 属性，无额外性能或内存开销。	ES5 黄金标准
ES6 Class 继承	class Child extends Parent	底层仍是寄生组合式继承的语法糖，同时额外链接了构造函数之间的原型。	现代开发首选

寄生组合式继承完整实现（ES5 规范做法）

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.getName = function() {
  return this.name;
};

function Child(name, age) {
  // 1. 继承父类属性（借用构造函数）
  Parent.call(this, name);
  this.age = age;
}

// 2. 继承父类方法（核心：仅复制原型链链接，不调用 Parent 构造函数）
Child.prototype = Object.create(Parent.prototype);

// 3. 修复丢失的构造函数指针
Child.prototype.constructor = Child;

Child.prototype.getAge = function() {
  return this.age;
};

五、工程实践规范与避坑原则

在现代日常前端研发中，虽然由于 ES6 语法的普及，开发者极少需要手写底层的原型链拼接代码，但以下三条原则对于保证应用稳定性、避免性能恶化至关重要：

1. 绝不直接操作 __proto__

__proto__ 最初只是各大浏览器的非标准私有实现，后来虽然作为兼容附录写入 ECMAScript 规范，但直接对其进行读写会破坏 V8 等现代引擎的隐藏类（Hidden Class）优化，造成严重的性能降级。在需要动态处理原型的场景中，应当严格使用官方标准 API：

• 读取原型：使用 Object.getPrototypeOf(obj)。
• 创建特定原型对象：使用 Object.create(proto)。
• 谨慎设置已有对象的原型：使用 Object.setPrototypeOf(obj, proto)（非极端情况尽量避免运行时修改）。

2. 防范原型污染（Prototype Pollution）漏洞

如果业务逻辑中包含未经验证的深度对象合并（如深拷贝、JSON 递归解析），攻击者若传入含有 "__proto__" 键名的恶意负载，就可能把属性注入到全局 Object.prototype 上，导致所有普通对象受到污染。

防范做法：对于纯粹用作键值映射（Map/Dictionary）的对象容器，优先使用 Map，或者使用 Object.create(null) 初始化无任何原型的“纯净对象”，从根本上免疫原型污染。

3. 控制原型链层级深度

每次访问对象上不存在的属性时，JavaScript 引擎都需要在原型链上完整向上回溯一次直到 null。过深的原型层级（如超过 4～5 层）会导致大量无效的未命中查找。对于高频调用的核心计算逻辑，应保持属性结构的扁平化。