JavaScript中的class语法详解
在 ES6 之前，JavaScript 主要借助构造函数和原型链来实现面向对象编程。ES6 引入的 class 语法本质上是对传统构造函数和原型模式的语法糖，它让面向对象代码的编写更加符合传统面向对象语言的阅读习惯，同时降低了理解成本。本文将从类的基本定义、继承机制、静态成员以及使用注意事项几个角度展开说明。
一、class的基本定义与构造函数
使用 class 关键字可以定义一个类。类名通常采用首字母大写的形式，类体内部可以定义构造函数、实例方法、静态方法等内容。其中 constructor 是类的构造函数，当使用 new 关键字创建实例时，constructor 会被自动调用，负责初始化实例上的属性。在构造函数中，this 指向新创建的实例对象，因此可以通过 this 为每一个实例挂载独立的数据。
类体内部定义的普通方法称为实例方法。这些方法不会被复制到每一个实例对象上，而是挂载在类的原型对象上，所有实例通过原型链共享同一份方法。这种设计既节省内存，也有利于后续扩展。下面是一个最基础的类定义和使用示例：
// 定义 Person 类
class Person {
// 构造函数：在 new 时自动调用
constructor(name, age) {
this.name = name;
this.age = age;
}
// 实例方法：挂载在 Person.prototype 上
introduce() {
console.log(`我是${this.name}，今年${this.age}岁`);
}
}
// 创建实例
const person1 = new Person('张三', 20);
person1.introduce(); // 我是张三，今年20岁
// 验证实例方法位于原型上
console.log(typeof Person.prototype.introduce); // function上面的代码中，constructor 接收外部传入的 name 和 age，并把它们保存到新创建的实例上。introduce 方法直接写在 class 内部，不需要使用 function 关键字。当调用 person1.introduce() 时，JavaScript 会沿着原型链找到 Person.prototype.introduce 并执行。
与传统的构造函数写法相比，class 语法将构造函数、实例方法等内容集中在一个代码块中，结构更加清晰。虽然底层仍然是原型机制，但对于熟悉 Java、C++ 等语言的开发者来说，class 写法可以明显降低阅读和维护成本。
二、使用extends实现类的继承
继承可以让一个类复用另一个类的属性和方法，并在其基础上扩展新的能力。JavaScript 的 class 通过 extends 关键字建立父子关系，子类会继承父类的实例方法和原型特性。当子类需要初始化自己的属性时，可以在 constructor 中使用 super 调用父类的构造函数。
需要特别注意的是，如果子类显式定义了 constructor，那么在使用 this 之前必须先调用 super，否则 JavaScript 会抛出引用错误。super 在这里的作用是执行父类的构造函数，完成父类属性在子类实例上的初始化。如果子类没有定义 constructor，引擎会默认使用父类的构造函数参数并自动调用 super。
// 父类：Person
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`我是${this.name}`);
}
}
// 子类：Student 继承 Person
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // 必须先调用父类构造函数
this.grade = grade; // 再初始化子类自己的属性
}
study() {
console.log(`${this.name}正在上${this.grade}年级`);
}
// 重写父类的方法
sayHello() {
super.sayHello(); // 调用父类的 sayHello 方法
console.log(`我的年级是${this.grade}年级`);
}
}
const student1 = new Student('李四', 18, '高三');
student1.sayHello();
student1.study();在这个示例中，Student 继承了 Person 的 name 和 age 初始化逻辑，同时增加了 grade 属性和 study 方法。sayHello 方法被子类重写后，会先通过 super.sayHello() 执行父类版本，再输出子类特有的年级信息。这种调用父类方法的方式在多层继承结构中非常实用。
继承的本质仍然是原型链的延伸：子类的原型对象会指向父类的原型对象，从而实现方法查找的链式结构。class 语法并没有创造全新的继承模型，而是让这一过程在书写层面更加自然和易于理解。
三、静态方法与静态属性
静态成员属于类本身，而不属于某个具体实例。静态方法使用 static 关键字定义，调用时必须通过类名访问，不能通过实例对象访问。静态方法适合封装与类相关但不依赖具体实例状态的通用逻辑，例如数学计算、工厂方法、配置读取等。
静态属性在较早的规范中并没有像静态方法那样的专门语法，通常可以直接在类定义之后通过类名赋值来添加。当下较新的 JavaScript 环境也支持在类体中直接书写 static 属性，但为了兼容更多运行环境，仍然可以使用类名赋值的方式实现静态属性。
// 数学工具类
class MathUtils {
// 静态方法：求和
static add(a, b) {
return a + b;
}
// 静态方法：求差
static subtract(a, b) {
return a - b;
}
}
// 通过类名直接调用静态方法
console.log(MathUtils.add(1, 2)); // 3
console.log(MathUtils.subtract(5, 3)); // 2
// 添加静态属性
MathUtils.PI = 3.1415926;
console.log(MathUtils.PI); // 3.1415926
// 实例对象无法访问静态方法
const math = new MathUtils();
// math.add(1, 2); // TypeError: math.add is not a function从运行结果可以看出，MathUtils.add 和 MathUtils.subtract 不依赖任何实例数据，因此被定义为静态方法非常合适。实例对象 math 无法访问 add，这也体现了静态成员与实例成员之间的明确边界。静态属性 PI 保存在类对象 MathUtils 上，同样与具体实例无关。
四、class使用中的注意事项
class 语法虽然直观，但也存在一些容易被忽略的细节。首先，类声明不会像函数声明那样进行变量提升。也就是说，必须先定义类，再使用 new 创建实例，否则会抛出引用错误。这一限制有助于减少代码执行顺序带来的混乱。
其次，class 内部定义方法时不需要写 function 关键字，方法之间也不需要用逗号分隔。类体默认运行在严格模式下，因此不需要再手动添加 use strict 声明。此外，class 内部定义的方法在原型上是不可枚举的，这与传统构造函数直接给 prototype 赋值方法的行为不同。
- 类不存在变量提升，必须先定义后使用。
- 类内部的方法不能使用 function 关键字声明。
- 类体默认处于严格模式。
- 类的原型方法默认不可枚举。
// 错误示例：类不存在变量提升
// const p = new Person(); // ReferenceError: Cannot access 'Person' before initialization
// class Person {}
class TestClass {
method() {}
}
// 类原型上的方法不可枚举
console.log(Object.keys(TestClass.prototype)); // []
// 可以通过 Object.getOwnPropertyNames 查看不可枚举方法名
console.log(Object.getOwnPropertyNames(TestClass.prototype)); // ['constructor', 'method']最后这段代码展示了类声明不会被提升的注意事项，以及原型方法不可枚举的特性。Object.keys 只返回可枚举属性，所以结果为空数组；而 Object.getOwnPropertyNames 可以列出包括不可枚举属性在内的名称，因此能够看到 constructor 和 method。这也进一步印证了 class 方法与传统原型方法在属性描述符上的差异。
总结与延伸
JavaScript 的 class 语法为面向对象编程提供了更加清晰、规范的书写方式。它并没有创造一套全新的对象模型，而是对构造函数和原型链机制进行了更友好的封装。掌握 class 的基本定义、继承关系和静态成员之后，就可以在业务开发中更有效地组织对象结构。
在实际项目中，建议优先使用 class 组织需要多次实例化的模型对象，而将不依赖状态的通用逻辑放入静态方法中。同时要牢记 super 的调用顺序、类声明不能提升以及原型方法不可枚举等细节。理解这些底层行为，有助于在调试和阅读框架源码时减少困惑。随着 JavaScript 语言特性不断演进，class 还会与模块化、装饰器等特性进一步结合，成为现代前端开发的重要基础。