当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript类定义与使用详解

JavaScript类定义与使用详解

2026-04-08 11:40:15 0浏览收藏

JavaScript 的 class 并非传统面向对象语言中的真正类，而是基于原型链的构造函数语法糖，它通过更清晰、更严格的语法（如强制使用 new 调用、不可提升、默认严格模式）提升了代码可读性与健壮性；文章系统讲解了 class 的定义规范（必须含 constructor）、实例/静态方法声明、公共字段（ES2022）、继承机制（extends + super 的关键约束），并深入剖析了常见陷阱——如子类 constructor 中 super() 的强制调用顺序、this 初始化依赖、作用域限制及旧环境兼容方案，帮助开发者避开“看似简单实则暗坑密布”的 class 使用误区。

javascript中的类如何定义和使用？_探索javascript ES6类语法【教程】

JavaScript 中的 class 不是传统面向对象语言里的“类”，它只是构造函数的语法糖，底层仍基于原型链。直接用 class 定义不会改变继承本质，但写法更清晰、约束更强（比如必须用 new 调用，否则报 TypeError: Class constructor X cannot be invoked without 'new'）。

如何定义一个基础 class

用 class 关键字 + 类名 + 花括号，内部至少需一个 constructor 方法（不写会自动生成空构造器）：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

注意：constructor 是唯一能用于初始化实例属性的方法；类体中不能写变量声明或表达式语句（比如 let x = 1 或 console.log()），否则报 Unexpected token。

如何添加方法和静态成员

方法直接写在类体内，不加 function 关键字；静态方法用 static 前缀，只能通过类名调用：

实例方法（如 sayHello）会被添加到 Person.prototype 上
静态方法（如 createAdmin）挂载在 Person 函数本身上，不可被实例访问
字段声明（如 level = 1）属于 ES2022 提案，需确保运行环境支持（Node.js ≥16.0 或现代浏览器），否则会报 Unexpected token

class User {
  level = 1; // 公共字段（非静态）
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi, ${this.name}`;
  }
  static createAdmin() {
    return new User('admin');
  }
}

如何实现继承：extends 和 super 的配合

子类必须在 constructor 中第一行调用 super()，否则报 ReferenceError: Must call super constructor in derived class before accessing 'this'。这是因为子类实例的 this 依赖父类构造器初始化：

super() 用于调用父类构造器，传参要匹配父类 constructor 参数
super.xxx 可访问父类的原型方法或静态属性（但不能在 constructor 外部单独写 super()）
子类若没写 constructor，会自动补上 constructor(...args) { super(...args); }

class Admin extends User {
  constructor(name, role) {
    super(name); // 必须！
    this.role = role;
  }
  info() {
    return `${super.greet()} (${this.role})`;
  }
}