javascript类如何创建_如何使用ES6类语法【教程】

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）、常量或工厂函数。

容易踩的坑：

• 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 或用构建工具兜底。真正在意运行时行为的，别只看语法是否“看起来像类”。