JavaScript 的 class 是语法糖,本质是基于原型的继承机制;class 声明生成不可提升的函数,方法挂载在 prototype 或构造函数上,extends 通过 proto 链接原型,super 初始化 this 并支持多上下文调用。

JavaScript 中的 class 只是语法糖,底层仍是基于原型的继承机制;不理解 prototype 和 __proto__ 的关系,强行套用其他语言的“类思维”,迟早会踩坑。
class 声明本质是函数,不是真正的类
class 语法看起来像 Java 或 Python,但编译后就是带特殊属性的函数。它不能被提升(hoisting),且默认启用严格模式。
-
class Person {}等价于const Person = class {},Person是一个不可枚举的构造函数 - 直接调用
Person()(不加new)会抛出TypeError: Class constructor Person cannot be invoked without 'new' - 静态方法和实例方法都挂载在不同位置:
Person.method→ 构造函数自身;Person.prototype.method→ 实例可访问
extends 实现的是原型链继承,不是拷贝
extends 并不会把父类所有方法复制到子类,而是让子类的 prototype.__proto__ 指向父类的 prototype,形成原型链查找路径。
- 子类必须在
constructor中第一行调用super(),否则无法访问this—— 因为super()才真正初始化了this对象的原型链接 - 如果父类构造函数有参数,
super(...args)必须传入,否则可能丢失初始化逻辑 - 静态方法也能被继承:
Child.staticMethod()可以调用,因为Child.__proto__ === Parent
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name} makes a sound.`;
}
static info() {
return 'Animal base class';
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // ← 必须!否则 ReferenceError: Must call super constructor
this.breed = breed;
}
bark() {
return `${this.name} barks!`;
}
}
super 不只是调用父构造函数,还能调用父级方法和访问父级静态成员
super 在不同上下文中有不同行为:在 constructor 中是调用父构造器,在普通方法中是调用父类同名方法,在静态方法中指向父类本身。
立即学习“Java免费学习笔记(深入)”;
- 在实例方法里:
super.speak()查找的是Animal.prototype.speak - 在静态方法里:
super.info()等价于Animal.info() - 不能在箭头函数或普通函数中使用
super,只在类的方法定义(含get/set)中有效 - 误写成
this.super.speak()或super().speak()都会报错
想真正掌握,得亲手破坏一次继承链
光看正确示例容易产生幻觉。试试这些操作,观察报错或输出变化:
- 删掉
Dog的constructor,再删掉super()→ 报ReferenceError - 在
Dog.prototype.speak = null后调用new Dog('Lucky').speak()→ 仍能执行,因为查找到Animal.prototype.speak - 手动改写
Dog.prototype.__proto__ = null→speak()直接undefined,原型链断了
原型链看不见摸不着,但每次方法调用都在走它。继承不是“我拥有父类的代码”,而是“我找不到时,去问原型”。










