当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript原型链详解与继承机制解析

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

2026-01-18 21:57:44 0浏览收藏

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

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

javascript原型链是什么_怎样理解继承机制？

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 也被改了