JavaScript原型链原理与继承对比

大家好，今天本人给大家带来文章《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

class 把这些都封装掉了，但掩盖了原型链本身的工作逻辑。一旦遇到需要动态挂载方法、运行时替换原型、或调试 instanceof 失效的问题，绕不开对 __proto__ 和 prototype 关系的真实理解。

今天关于《JavaScript原型链原理与继承对比》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！