JavaScript 的 class 是基于原型的语法糖,本质仍是 function + prototype;它提供更清晰的结构但不改变底层机制,所有继承、方法共享和属性查找均依赖 [[Prototype]] 链。

JavaScript 的 class 是语法糖,不是新机制;它背后完全运行在原型系统之上。写起来像 Java 或 Python,但执行时和 function + prototype 一模一样。
class 只是更清晰的写法
ES6 的 class 提供了标准化、可读性更强的结构:明确的 constructor、static 方法、extends 和 super 关键字。但它不改变底层行为——Babel 转译后,class Animal 就变成带 Animal.prototype.speak = ... 的函数。
- 类声明会自动创建构造函数,并把方法挂到
.prototype上 -
extends实际调用Object.setPrototypeOf(Child.prototype, Parent.prototype) -
super()本质是调用父构造函数,且必须在this使用前执行
原型语义才是真实运行逻辑
所有对象都通过 [[Prototype]] 链查找属性。这个链由 __proto__(或 Object.getPrototypeOf())暴露,起点是构造函数的 prototype 对象。
- 实例的
__proto__指向其构造函数的prototype - 方法共享靠的是原型对象,不是每个实例复制一份
- 属性查找是动态委托:自身 →
__proto__→__proto__.__proto__→ … →null
二者关键差异不在功能,而在约束与表达
语法糖让代码更易组织、协作更安全,但原型机制赋予了 JavaScript 独特的灵活性。
立即学习“Java免费学习笔记(深入)”;
- 类语法禁止在运行时修改
constructor或重写prototype(严格模式下会报错) - 原型方式允许随时给
SomeClass.prototype添加方法,甚至替换整个原型 - 类无法直接表达“对象直接继承另一个对象”(即
Object.create(obj)),而原型可以
什么时候该关注底层原型
多数业务开发用 class 完全够用;但遇到这些情况,就得回到原型层面理解:
- 调试时发现方法没被调用——检查
__proto__链是否断裂 - 想让一个对象复用另一个对象的方法,又不想用构造函数——用
Object.setPrototypeOf()或Object.create() - 需要模拟私有字段或不可枚举方法——得手动操作
Object.defineProperty到原型上 - 框架源码(如 Vue 响应式、MobX)大量依赖原型劫持和
defineProperty,绕不开底层机制


















