JavaScript class 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们将展示如何使用 class 关键字在 JavaScript 中进行面向对象编程。 类提供了更清晰的语法来创建对象和处理继承。
class 关键字
class 关键字是在 ES6 (ECMAScript 2015) 中引入的，用于在 JavaScript 中创建类。 它是对 JavaScript 现有基于原型的继承的语法糖。 类提供了更熟悉的面向对象编程语法。
类是创建具有预定义属性和方法的对象的蓝图。 类封装了属于一起的数据和行为。 它们可以被多次实例化，以创建具有相同结构的对象。
JavaScript 类支持构造函数、方法、继承和静态成员。 在底层，JavaScript 类仍然使用原型继承。 类语法并没有引入一个新的面向对象继承模型。
基本类定义
下面的例子演示了 class 关键字的基本用法，用于定义一个简单的类。
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const person = new Person('John');
person.greet();
此代码定义了一个 Person 类，它带有一个构造函数和一个方法。 当创建新实例时，将调用构造函数。 可以在类的实例上调用 greet 方法。 我们使用 new 关键字创建一个实例。
$ node main.js Hello, my name is John
类继承
JavaScript 类使用 extends 关键字支持继承。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex');
dog.speak();
此示例显示了 Dog 继承 Animal 的情况。 Dog 类继承了 Animal 的属性和方法。 我们在 Dog 类中重写了 speak 方法。 super 关键字可以访问父类方法。
$ node main.js Rex barks.
静态方法
静态方法在类本身上调用，而不是在实例上。
class MathUtils {
static square(x) {
return x * x;
}
static cube(x) {
return x * x * x;
}
}
console.log(MathUtils.square(3));
console.log(MathUtils.cube(3));
静态方法使用 static 关键字定义。 它们对于不需要实例数据的实用程序函数很有用。 你不能在类实例上调用静态方法。 它们直接在类上调用。
$ node main.js 9 27
Getters 和 Setters
类支持 getter 和 setter 方法来控制属性访问。
class Rectangle {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() {
return this._width * this._height;
}
set width(value) {
if (value > 0) {
this._width = value;
}
}
}
const rect = new Rectangle(10, 20);
console.log(rect.area);
rect.width = 15;
console.log(rect.area);
Getters 和 setters 允许对属性进行受控访问。 area getter 动态计算面积。 width setter 包括验证。 具有 getter/setter 的属性通常使用下划线前缀约定。
$ node main.js 200 300
私有类字段
现代 JavaScript 使用井号 (#) 前缀支持私有类字段。
class Counter {
#count = 0;
increment() {
this.#count++;
}
getCount() {
return this.#count;
}
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount());
私有字段只能在类主体内访问。 它们不能从类外部访问。 这提供了真正的封装。 必须先声明私有字段，然后才能引用它们。 它们不能通过点符号访问。
$ node main.js 1
类表达式
类可以使用表达式定义，类似于函数表达式。
const Circle = class {
constructor(radius) {
this.radius = radius;
}
get area() {
return Math.PI * this.radius ** 2;
}
};
const circle = new Circle(5);
console.log(circle.area.toFixed(2));
类表达式可以是有名的或无名的。 此示例显示了分配给变量的无名类表达式。 然后可以使用变量名实例化该类。 当需要将类作为参数传递时，类表达式很有用。
$ node main.js 78.54
实际用例：用户管理
这是一个使用类进行用户管理的实际例子。
class User {
constructor(username, email) {
this.username = username;
this.email = email;
this.loggedIn = false;
}
login() {
this.loggedIn = true;
console.log(`${this.username} logged in`);
}
logout() {
this.loggedIn = false;
console.log(`${this.username} logged out`);
}
}
class Admin extends User {
constructor(username, email, permissions) {
super(username, email);
this.permissions = permissions;
}
deleteUser(user) {
console.log(`${this.username} deleted user ${user.username}`);
}
}
const admin = new Admin('admin', 'admin@example.com', ['delete', 'create']);
admin.login();
此示例显示了一个 User 基类和一个 Admin 子类。 Admin 类继承自 User 并添加了附加功能。 super 关键字调用父类构造函数。 这演示了一个真实的类层次结构。
$ node main.js admin logged in
来源
在本文中，我们演示了如何使用 class 关键字在 JavaScript 中进行面向对象编程。