ES6 class 是语法糖,本质仍基于原型继承;constructor 必须显式调用 super()(子类中),static 成员属类本身而非实例,类字段需注意兼容性。

ES6 class 不是新对象模型,只是语法糖
JavaScript 的 class 关键字没有引入新的面向对象机制,它背后仍是基于原型的继承。写 class 本质上是在操作 prototype,只是把原来分散的 function 声明、MyClass.prototype.xxx = function() {...} 等写法收束成更清晰的结构。如果你试图用它模拟 Java/C# 的类加载或静态类型行为,会很快遇到困惑。
常见错误现象:class Person {} 定义后直接 Person.name 拿到的是字符串 "Person",不是实例名;new Person().constructor === Person 为 true,说明它仍指向构造函数本身。
定义类必须用 constructor,且不能省略
ES6 类中,constructor 是唯一能初始化实例属性和调用 super() 的地方。没有显式写 constructor,引擎会自动补一个空的;但一旦写了子类的 constructor,就必须手动调用 super(),否则报错 "Must call super constructor in derived class before accessing 'this' or returning from derived constructor"。
- 父类可省略
constructor:等价于constructor() {} - 子类写了
constructor却没调用super()→ 直接抛ReferenceError -
super()必须在访问this之前调用,哪怕只写console.log(this)都会失败
示例:
立即学习“Java免费学习笔记(深入)”;
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 必须第一行
this.breed = breed;
}
}
static 方法和属性不挂载到实例上
static 关键字声明的成员属于类本身,不是原型链的一部分,因此不能通过 new Xxx() 创建的实例访问。它常用于工具方法(如 fromJSON)、常量或工厂函数。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
容易踩的坑:
-
dogInstance.staticMethod()→undefined或TypeError -
Dog.staticMethod()才是正确调用方式 -
static属性在类定义时即求值,不支持私有字段语法(#field)与static组合(目前仅 Stage 4 提案,主流环境不支持) - 继承时,
static方法会被子类继承,可通过Child.staticMethod()调用
类字段(Class Fields)需注意浏览器兼容性
像 name = "default" 这种公有字段语法(非函数)属于 ES2022 正式特性,但早期版本(如 Chrome 72–78、Safari 14.1 之前)不支持,若需兼容旧环境,得用 constructor 初始化或借助 Babel。
使用场景:
- 避免在
constructor中重复写this.xxx = xxx - 配合
#privateField实现真正私有状态(仅限最新引擎) - 但要注意:字段初始化表达式在每次实例化时执行,不是类定义时——所以
count = Math.random()每次都不同
示例(需确认目标环境支持):
class Counter {
#value = 0; // 私有字段
step = 1; // 公有字段
get current() { return this.#value; }
inc() { this.#value += this.step; }
}类字段和私有方法在生产环境启用前,务必查 caniuse 或用构建工具兜底。真正在意运行时行为的,别只看语法是否“看起来像类”。










