JavaScript的class关键字是什么？如何定义类？

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

  // 实例方法，每个Person实例都会有这个方法
  greet() {
    console.log(`你好，我叫${this.name}，我今年${this.age}岁了。`);
  }

  // 另一个实例方法
  celebrateBirthday() {
    this.age++;
    console.log(`${this.name}庆祝了生日，现在${this.age}岁了！`);
  }
}

// 创建一个Person类的实例
const alice = new Person('爱丽丝', 30);
alice.greet(); // 输出: 你好，我叫爱丽丝，我今年30岁了。
alice.celebrateBirthday(); // 输出: 爱丽丝庆祝了生日，现在31岁了！
alice.greet(); // 输出: 你好，我叫爱丽丝，我今年31岁了。

const bob = new Person('鲍勃', 25);
bob.greet(); // 输出: 你好，我叫鲍勃，我今年25岁了。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name}发出声音。`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // 调用父类的构造函数，这是在子类构造函数中访问this之前的必须操作
    super(name);
    this.breed = breed;
  }

  // 覆盖父类的speak方法
  speak() {
    console.log(`${this.name}汪汪叫，它是一只${this.breed}。`);
  }

  fetch() {
    console.log(`${this.name}正在捡球。`);
  }
}

const myDog = new Dog('旺财', '金毛');
myDog.speak(); // 输出: 旺财汪汪叫，它是一只金毛。
myDog.fetch(); // 输出: 旺财正在捡球。

const genericAnimal = new Animal('小动物');
genericAnimal.speak(); // 输出: 小动物发出声音。

// 检查实例是否是某个类的实例
console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true
console.log(genericAnimal instanceof Dog); // false

class Calculator {
  // 实例方法
  add(a, b) {
    return a + b;
  }

  // 静态方法
  static multiply(a, b) {
    return a * b;
  }
}

const calc = new Calculator();
console.log(calc.add(5, 3)); // 输出: 8 (通过实例调用实例方法)

// console.log(calc.multiply(5, 3)); // 错误！不能通过实例调用静态方法

console.log(Calculator.multiply(5, 3)); // 输出: 15 (通过类名调用静态方法)

class BankAccount {
  #balance; // 私有字段

  constructor(initialBalance) {
    if (initialBalance < 0) {
      throw new Error("初始余额不能为负数。");
    }
    this.#balance = initialBalance;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
      console.log(`存入${amount}元，当前余额：${this.#balance}元。`);
    }
  }

  withdraw(amount) {
    if (amount > 0 && this.#balance >= amount) {
      this.#balance -= amount;
      console.log(`取出${amount}元，当前余额：${this.#balance}元。`);
    } else {
      console.log("余额不足或取款金额无效。");
    }
  }

  // 公有方法，用于获取私有字段的值
  getBalance() {
    return this.#balance;
  }
}

const myAccount = new BankAccount(100);
myAccount.deposit(50); // 存入50元，当前余额：150元。
myAccount.withdraw(30); // 取出30元，当前余额：120元。

// console.log(myAccount.#balance); // 语法错误！无法从外部访问私有字段
console.log(myAccount.getBalance()); // 输出: 120 (通过公有方法访问)

// 示例：组合优于继承
class Logger {
  log(message) {
    console.log(`[LOG] ${message}`);
  }
}

class Authenticator {
  authenticate(user, pass) {
    // 模拟认证逻辑
    return user === 'admin' && pass === '123';
  }
}

class UserProcessor {
  constructor() {
    this.logger = new Logger(); // 组合Logger
    this.authenticator = new Authenticator(); // 组合Authenticator
  }

  processUser(username, password) {
    if (this.authenticator.authenticate(username, password)) {
      this.logger.log(`${username} 认证成功！`);
      // ... 更多处理逻辑
    } else {
      this.logger.log(`${username} 认证失败！`);
    }
  }
}

const processor = new UserProcessor();
processor.processUser('admin', '123');
processor.processUser('guest', 'abc');

class Button {
  constructor(label) {
    this.label = label;
    // 错误示例：直接传递实例方法作为回调，this会丢失
    // document.getElementById('myButton').addEventListener('click', this.onClick);

    // 解决方案1：在构造函数中绑定this
    // document.getElementById('myButton').addEventListener('click', this.onClick.bind(this));

    // 解决方案2：使用箭头函数作为类属性（推荐）
    document.getElementById('myButton').addEventListener('click', this.onClickArrow);
  }

  onClick() {
    console.log(`${this.label} 被点击了！`); // 这里的this可能不是Button实例
  }

  onClickArrow = () => {
    console.log(`${this.label} (通过箭头函数) 被点击了！`); // 这里的this始终是Button实例
  }
}

// 假设HTML中有一个id为'myButton'的按钮
// new Button('提交');