JavaScript 类（Class）：从声明到表达式的指南
在 JavaScript 的世界里，类（Class）并非一个全新的实体，它本质上是函数的特殊形式，是原型继承（Prototypal Inheritance）的语法糖。很多刚接触的朋友可能会觉得它只是让代码看起来更“面向对象”（Object-Oriented Programming, OOP）了，但理解其底层的运作机制，对于编写健壮的代码非常重要。
JavaScript 的类定义有两种核心方式：类声明（Class Declarations） 和 类表达式（Class Expressions）。它们就像是同一个概念的两副面孔，各有各的脾气和适用场景。
一、类声明：规矩的“显式”定义
类声明是我们最常用的方式，它要求使用 class 关键字，并后跟一个类名。按照 JavaScript 社区的命名习惯，类名通常以大写字母开头，这是一种约定，有助于我们快速区分构造函数和普通函数。
1. 基础示例：定义一个“代码号”课程类
假设我们要为一个在线编程学习平台“代码号”创建一个课程类，用于记录课程的基本信息。
<script>
// 声明一个名为 Course 的类
class Course {
// 构造函数，用于初始化新创建的对象
constructor(courseId, title, author) {
this.courseId = courseId;
this.title = title;
this.author = author;
}
// 类的方法，用于展示课程信息
displayInfo() {
document.writeln(`课程ID: ${this.courseId}，名称: ${this.title}，讲师: ${this.author}<br>`);
}
}
// 创建两个 Course 类的实例（instance）
const jsCourse = new Course(101, "JavaScript 高级编程", "李明");
const pyCourse = new Course(102, "Python 数据分析实战", "王芳");
// 调用它们的方法
jsCourse.displayInfo();
pyCourse.displayInfo();
</script>
2. 类声明与提升（Hoisting）
这里需要特别强调一个和函数声明不同的地方：类声明不会被提升（Hoisting）。这意味着，你必须在声明类之后才能去使用它（比如 new 实例化）。如果先使用后声明，JavaScript 引擎会抛出一个 ReferenceError。
<script>
// 错误示例：试图在声明前使用类
// const errCourse = new Course(103, "错误示例", "张三"); // 这行会报错
// 声明类
class Course {
constructor(courseId, title, author) {
this.courseId = courseId;
this.title = title;
this.author = author;
}
displayInfo() {
document.writeln(`课程ID: ${this.courseId}<br>`);
}
}
// 正确使用：在声明之后
const correctCourse = new Course(103, "正确示例", "李四");
correctCourse.displayInfo();
</script>
个人经验分享： 我在早期开发中，曾因为没注意提升（Hoisting）的区别，习惯性地像写函数那样把类定义放在文件底部，结果导致引用错误，花了不少时间排查。养成将类声明放在文件顶部或使用前声明的习惯，可以有效避免这类低级错误。
3. 类声明的唯一性：不可重复声明
和 let、const 类似，使用 class 关键字声明的类，在其作用域内是唯一的，不能被重复声明。如果你尝试用 class 声明一个同名的类，会收到 SyntaxError。这在大型项目或多人协作时，能有效防止意外的命名覆盖。
<script>
// 第一次声明
class Theme {
constructor(name) { this.name = name; }
}
// 再次声明同名类
// class Theme { // 这行代码会抛出语法错误
// constructor() { }
// }
document.writeln("类声明不可重复，这保证了代码的确定性。");
</script>
二、类表达式：灵活多变的“匿名”方式
类表达式是定义类的另一种方式。它较大的特点是可以不命名，允许我们像使用值一样使用类。这在需要动态创建类或进行函数式编程时非常有用。
1. 未命名类表达式：返回一个匿名类
<script>
// 将未命名的类表达式赋值给变量 CourseLib
const CourseLib = class {
constructor(courseId, title) {
this.courseId = courseId;
this.title = title;
}
display() {
document.writeln(`${this.courseId}: ${this.title}<br>`);
}
};
// 此时，类的名字并不是 CourseLib，而是变量名指向的匿名类
document.writeln(`类的名称是: ${CourseLib.name}<br>`); // 输出 "CourseLib"
const courseA = new CourseLib(201, "Vue.js 从入门到实践");
courseA.display();
</script>
2. 命名类表达式：为类指定一个内部名称
你可以为类表达式指定一个名字，这个名字的作用域仅限于类体内部。这在调试堆栈信息或需要递归时能提供帮助。
<script>
// 创建一个命名类表达式，类名为 InternalCourse
const CodeCourse = class InternalCourse {
constructor(courseId, title) {
this.courseId = courseId;
this.title = title;
}
getDetails() {
// 在类内部，可以通过 InternalCourse 这个名字访问自身
return `${InternalCourse.name} 实例: ${this.title}`;
}
};
document.writeln(`变量 CodeCourse 指向的类名是: ${CodeCourse.name}<br>`);
// 注意：InternalCourse 这个名字在外面是无法访问的，会报错
const myCourse = new CodeCourse(301, "React 全栈开发");
document.writeln(myCourse.getDetails());
</script>
3. 类表达式的可重复声明：变量的重新赋值
与类声明不同，因为类表达式本质上是通过变量（如 var）来引用的，所以我们可以对这个变量进行重新赋值，从而“替换”掉原来的类。这为我们提供了更高的灵活性。
<script>
// 第一次使用类表达式
let CourseBuilder = class {
constructor(name) {
this.name = name;
this.version = "1.0";
}
showVersion() {
document.writeln(`版本: ${this.version}<br>`);
}
};
const courseV1 = new CourseBuilder("基础语法");
courseV1.showVersion();
// 重新声明（实际上是重新赋值）
CourseBuilder = class {
constructor(name) {
this.name = name;
this.version = "2.0";
}
showVersion() {
document.writeln(`全新版本: ${this.version}<br>`);
}
};
const courseV2 = new CourseBuilder("高级特性");
courseV2.showVersion();
</script>
本节课程知识要点
-
优先使用类声明：在编写确定且唯一的类时，推荐使用
class声明，代码结构清晰，语义明确。 -
警惕提升问题：牢记类声明不会被提升（Hoisting），始终在
new一个实例之前定义好类。 -
灵活运用类表达式：当需要根据条件动态创建类，或者希望类在某个作用域内拥有一个局部名称（用于调试）时，类表达式是更好的选择。
-
理解严格模式：无论你使用哪种方式定义类，类体内的代码都自动处于严格模式（
use strict）下。这意味着一些常见的JavaScript静默错误（如意外创建全局变量）会直接抛出错误，有助于我们写出更规范的代码。
