类
04-javascript2026/11/14
1. 基本语法
定义类
class Person {
// 构造函数
constructor(name, age) {
this.name = name;
this.age = age;
}
// 实例方法
introduce() {
console.log(`我叫${this.name}，今年${this.age}岁`);
}
// 静态方法
static sayHello() {
console.log("你好！");
}
}
// 创建实例
const person1 = new Person("张三", 25);
person1.introduce(); // 我叫张三，今年25岁
Person.sayHello(); // 你好！
2. 类继承
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name}在吃东西`);
}
speak() {
console.log(`${this.name}发出声音`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 必须调用父类的构造函数
this.breed = breed;
}
// 重写父类方法
speak() {
console.log(`${this.name}汪汪叫`);
}
// 扩展新方法
fetch() {
console.log(`${this.name}接住了球`);
}
// 调用父类方法
eat() {
super.eat(); // 先执行父类的eat方法
console.log(`${this.name}吃得很开心`);
}
}
const dog = new Dog("小白", "柯基");
dog.speak(); // 小白汪汪叫
dog.eat(); // 小白在吃东西 \n 小白吃得很开心
dog.fetch(); // 小白接住了球
3. Getter 和 Setter
class Circle {
constructor(radius) {
this._radius = radius;
}
// Getter
get radius() {
return this._radius;
}
// Setter
set radius(value) {
if (value <= 0) {
throw new Error("半径必须大于0");
}
this._radius = value;
}
get diameter() {
return this._radius * 2;
}
get area() {
return Math.PI * this._radius ** 2;
}
get circumference() {
return 2 * Math.PI * this._radius;
}
}
const circle = new Circle(5);
console.log(circle.radius); // 5
console.log(circle.diameter); // 10
console.log(circle.area); // 78.53981633974483
circle.radius = 10; // 使用setter
4. 静态属性和方法
class MathHelper {
// 静态属性
static PI = 3.141592653589793;
static version = "1.0.0";
// 静态方法
static sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
static average(...numbers) {
return this.sum(...numbers) / numbers.length;
}
// 工厂方法
static createRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
// 使用静态成员
console.log(MathHelper.PI); // 3.141592653589793
console.log(MathHelper.sum(1, 2, 3, 4, 5)); // 15
console.log(MathHelper.average(1, 2, 3)); // 2
// 实例不能访问静态成员
const helper = new MathHelper();
// helper.PI // undefined
// helper.sum() // Error
5. 私有字段和方法（ES2022+）
class BankAccount {
// 私有字段（#开头）
#balance = 0;
#accountNumber;
constructor(accountNumber, initialBalance = 0) {
this.#accountNumber = accountNumber;
this.#balance = initialBalance;
}
// 私有方法
#validateAmount(amount) {
if (amount <= 0) {
throw new Error("金额必须大于0");
}
return true;
}
// 公有方法
deposit(amount) {
this.#validateAmount(amount);
this.#balance += amount;
console.log(`存款成功，当前余额：${this.#balance}`);
}
withdraw(amount) {
this.#validateAmount(amount);
if (amount > this.#balance) {
throw new Error("余额不足");
}
this.#balance -= amount;
console.log(`取款成功，当前余额：${this.#balance}`);
}
getBalance() {
return this.#balance;
}
// 公有getter
get accountNumber() {
return this.#accountNumber;
}
}
const account = new BankAccount("1234567890", 1000);
account.deposit(500); // 存款成功，当前余额：1500
account.withdraw(200); // 取款成功，当前余额：1300
console.log(account.getBalance()); // 1300
// 私有字段外部无法访问
// account.#balance = 10000; // SyntaxError
// console.log(account.#balance); // SyntaxError