JavaScript原型链详解与继承机制解析

本篇文章向大家介绍《JavaScript原型链是什么？如何理解继承机制？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

JavaScript原型链是对象间通过[[Prototype]]形成的属性查找路径，核心在于查找不到时向上级原型查找，终点为null；Object.create()可手动构建原型链，class只是语法糖，引用类型属性共享是常见陷阱。

JavaScript 原型链不是“类继承的简化版”，它压根就不是类机制——它是对象之间通过 [[Prototype]] 链接形成的**属性查找路径**。理解它，关键不在“链”本身，而在“查找不到时往哪找”。

为什么访问 obj.method() 会成功，即使 obj 自身没定义这个方法？

因为 JavaScript 引擎会自动沿着 obj.__proto__ → obj.__proto__.__proto__ → … 逐级向上查找，直到找到该属性，或抵达 null（链终点）。

• obj.__proto__ 指向其构造函数的 prototype 对象（例如 new Person() 的 __proto__ 指向 Person.prototype）
• Person.prototype.__proto__ 是 Object.prototype，而 Object.prototype.__proto__ === null，这就是链的尽头
• 所有普通对象最终都共享 Object.prototype 上的方法（如 toString()、hasOwnProperty()）

用 Object.create() 手动搭原型链，比 new 更清晰

当你不想触发构造函数，只想单纯复用一个对象作为另一个对象的原型时，Object.create() 是最直白的方式。

const animal = {
  eat() { return 'eating...' }
};
const dog = Object.create(animal);
dog.breed = 'Golden';
console.log(dog.eat()); // ✅ 'eating...'
console.log(dog.__proto__ === animal); // ✅ true

• 避免了 new Animal() 可能带来的副作用（比如执行初始化逻辑、污染实例）
• 显式声明了“dog 的原型是 animal”，不依赖构造函数和 prototype 属性
• 注意：Object.create(null) 创建的是“无原型对象”，它连 toString() 都没有，慎用

ES6 class 是语法糖，但容易掩盖原型链真相

class 写起来像 Java，但底层仍是原型链。一旦你改写 constructor 或误设 prototype，继承就可能断裂。

• class B extends A 实际上做了两件事：设置 B.prototype.__proto__ = A.prototype，并确保 new B() 调用 A.call(this)
• 手动重写 B.prototype = { ... } 会切断与 A.prototype 的链接，必须补上 B.prototype.__proto__ = A.prototype 或用 Object.setPrototypeOf(B.prototype, A.prototype)
• 忘记修正 constructor：若写 B.prototype = Object.create(A.prototype)，则 new B().__proto__.constructor 会指向 A，而非 B —— 这会影响 instanceof 和序列化逻辑

最容易被忽略的坑：原型上的引用类型属性会被所有实例共享

在 Constructor.prototype 上定义数组、对象等引用类型，会导致所有实例“共用同一份数据”。

function User() {}
User.prototype.permissions = []; // ❌ 危险！
const u1 = new User();
const u2 = new User();
u1.permissions.push('admin');
console.log(u2.permissions); // ✅ ['admin'] —— u2 也被改了

• 正确做法：在构造函数内初始化引用类型（this.permissions = []）
• 或只在原型上放函数、原始值（字符串/数字/布尔），它们不会互相污染
• 这个坑在 Vue/React 组件原型方法里不明显，但在手写类库或工具函数时极易暴露

原型链真正的复杂点，不在“怎么连”，而在“谁在查、查什么、查到哪为止”。一旦你开始调试 obj.toString() 为何返回奇怪结果，或 instanceof 突然失效，问题往往出在某处悄悄覆盖了 __proto__，或误删了 constructor，而不是链本身断了。

本篇关于《JavaScript原型链详解与继承机制解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！