javascript原型链如何工作_原型继承与类继承有何不同？_技术教程

JavaScript原型链是唯一真实的继承机制，class仅为语法糖；属性查找从实例开始沿[[Prototype]]链委托至null，终点为Object.prototype；class继承通过Object.setPrototypeOf设置原型与构造函数的继承关系。

JavaScript 的原型链不是“类的简化版”，它就是语言运行时唯一真实的继承机制；class 只是语法糖，所有行为最终都落在 [[Prototype]] 链上。

原型链怎么查属性？从实例到 `null` 的委托过程

当你写 obj.method()，JS 引擎不会只在 obj 自身找 method，而是按固定路径逐层向上委托查找：

先查 obj 自身是否有该属性（Object.hasOwn(obj, 'method')）
没有？就去 obj.__proto__（即 Object.getPrototypeOf(obj)）上找
还没找到？继续查 obj.__proto__.__proto__，直到某一级的 __proto__ 为 null
整条链走完都没匹配，返回 undefined

这个链条的起点是实例对象，终点是 Object.prototype，再往上就是 Object.prototype.__proto__ === null。你随时可以用

console.log(Object.getPrototypeOf({})); // {constructor: f, __defineGetter__: f, ...}

验证。

`class` 继承背后到底发生了什么？用 `Object.setPrototypeOf` 拆解

写 class Child extends Parent，JS 引擎实际做了两件事：

让
Child.prototype.__proto__ 指向 Parent.prototype（实例方法继承）
让 Child.__proto__ 指向 Parent（静态方法继承）

等价于手动执行：

Object.setPrototypeOf(Child.prototype, Parent.prototype);
Object.setPrototypeOf(Child, Parent);

而 super() 在子类 constructor 中，本质就是调用 Parent.call(this, ...args)。没写 super()？直接报错 ReferenceError: Must call super constructor in derived class before accessing 'this' —— 这是 class 加的运行时约束，原型继承里可没这层保护。

为什么改 `Parent.prototype`，所有子类实例立刻生效？

因为原型链是运行时动态链接，不是编译期拷贝。比如：

function Animal() {}
Animal.prototype.speak = () => console.log('...');

class Dog extends Animal {}
const dog = new Dog();

// 此时修改父类原型
Animal.prototype.speak = () => console.log('woof!');

dog.speak(); // 输出 'woof!'，不是 '...'

这种动态性在原型继承中天然存在，但 class 写法容易让人误以为“类结构已固化”。真正要注意的是：如果在原型上挂的是引用类型（如数组、对象），所有实例会共享同一份数据 —— Child.prototype.items = [] 是经典陷阱，应改在构造函数内初始化 this.items = []。

手动实现继承时最常漏掉的三件事

用构造函数 + 原型模拟继承（比如 Child.prototype = Object.create(Parent.prototype)）时，以下三点不补全，代码大概率出 bug：

Child.prototype.constructor 会指向 Parent，必须手动修复：Child.prototype.constructor = Child
子类构造函数里没调用 Parent.call(this, ...)，导致 this 上缺失父类初始化的属性
父类的静态方法（如 Parent.create()）不会自动落到 Child 上，得显式赋值：Child.create = Parent.create