JavaScript 的 class 是基于原型的语法糖,本质仍是函数;继承需调用 super() 初始化 this;static 成员不被继承但可用 super 调用;需警惕原型链断裂、方法覆盖及箭头函数限制。

JavaScript 中的 class 本质是语法糖
它不是真正意义上的“类”,背后仍是基于原型(prototype)的继承机制。写 class 只是为了让代码更接近传统面向对象语言的写法,降低理解成本。如果你用 typeof MyClass 检查,结果仍是 "function";用 MyClass.prototype 依然能访问和修改原型对象。
常见误解是认为 class 像 Java 那样创建了独立的类型系统——它没有。所有实例的属性和方法最终都靠原型链查找。
用 extends 实现单继承时必须调用 super()
子类构造函数中如果定义了 constructor,就必须在使用 this 前调用 super(),否则会报错:ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor。
-
super()会执行父类构造函数,并初始化this -
super(props)如果父类需要参数,必须原样传入 - 不能在调用
super()前返回或访问this
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // ✅ 必须先调用
this.breed = breed;
}
}
static 方法和属性不被继承,但可通过 super 在子类中调用
static 成员属于类本身,不会出现在实例或原型上,所以子类不会自动继承它们。不过你可以在子类中用 super.staticMethod() 显式调用父类的静态方法(前提是该方法存在且可访问)。
立即学习“Java免费学习笔记(深入)”;
注意:super 在静态方法里指向父类,在实例方法里指向父类的原型;别混淆作用域。
- 子类无法通过
this.constructor.staticMethod()自动代理父类静态方法 - 想让子类“也拥有”同名静态方法,得手动重写或转发
- 静态属性(ES2022+)同样不继承,需显式定义
真正要小心的是原型链断裂和方法覆盖陷阱
很多人以为写了 extends 就万事大吉,但实际运行中容易踩坑:比如子类重写了父类方法却忘了调用 super.method(),导致父类逻辑丢失;或者误删/覆盖了 constructor 导致 instanceof 判断失效。
- 检查继承关系用
Object.getPrototypeOf(Child.prototype) === Parent.prototype,比只看instanceof更可靠 - 动态添加方法到
Parent.prototype后,已创建的子类实例也能访问——这是原型机制的特点,不是 bug - 箭头函数不能用作类方法,因为它没有自己的
this和prototype
继承不是一层抽象就完事,每加一层都要确认原型链是否连通、this 绑定是否如预期、静态与实例边界是否清晰。











