JS类如何定义和使用

class

new

this

constructor

class User {
  // 构造函数，当使用 new User() 时会被调用
  constructor(name, email) {
    this.name = name; // 实例属性
    this.email = email;
  }

  // 实例方法
  greet() {
    console.log(`你好，我是 ${this.name}。`);
  }

  // 静态方法：直接在类上调用，而不是在实例上调用
  static getRoleDescription() {
    return "这是一个用户角色，拥有基本的交互能力。";
  }

  // Getter 和 Setter：看起来像属性，但实际上是方法
  get firstName() {
    return this.name.split(' ')[0];
  }

  set newEmail(newMail) {
    if (newMail.includes('@')) {
      this.email = newMail;
    } else {
      console.error("无效的邮箱格式！");
    }
  }
}

// 也可以定义一个继承自另一个类的类
class Admin extends User {
  constructor(name, email, permissions) {
    super(name, email); // 调用父类的构造函数
    this.permissions = permissions;
  }

  manageUsers() {
    console.log(`${this.name} 正在管理用户，权限：${this.permissions.join(', ')}`);
  }
}

new

// 创建 User 类的实例
const user1 = new User("张三", "zhangsan@example.com");
user1.greet(); // 输出: 你好，我是 张三。
console.log(user1.firstName); // 输出: 张

user1.newEmail = "new_zhangsan@example.com";
console.log(user1.email); // 输出: new_zhangsan@example.com

user1.newEmail = "invalid-email"; // 输出: 无效的邮箱格式！

// 调用静态方法
console.log(User.getRoleDescription()); // 输出: 这是一个用户角色，拥有基本的交互能力。

// 创建 Admin 类的实例
const admin1 = new Admin("李四", "lisi@example.com", ["edit", "delete"]);
admin1.greet(); // 输出: 你好，我是 李四。
admin1.manageUsers(); // 输出: 李四 正在管理用户，权限：edit, delete

prototype

__proto__

Object.create()

class

class Child extends Parent

constructor

super()

this

this

this

undefined

bind

this

class MyComponent {
  constructor() {
    this.value = "Hello";
    // 方法一：在构造函数中绑定this
    this.handleClick = this.handleClick.bind(this);
  }

  // 传统方法定义
  handleClick() {
    console.log(this.value); // 如果不绑定，这里会是 undefined
  }

  // 方法二：使用箭头函数作为类属性（推荐）
  handleAnotherClick = () => {
    console.log(this.value); // 箭头函数会 lexically bind this
  }
}

const comp = new MyComponent();
// 模拟事件监听器调用
// setTimeout(comp.handleClick, 100); // 没绑定会出问题
// setTimeout(comp.handleAnotherClick, 100); // 没问题

_

#

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

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
    console.log(`存款成功，当前余额：${this.#balance}`);
  }

  // 外部无法直接访问 #balance
  getBalance() {
    return this.#balance;
  }
}

const myAccount = new BankAccount(100);
myAccount.deposit(50);
// console.log(myAccount.#balance); // 报错：私有字段无法访问
console.log(myAccount.getBalance()); // 150

export class MyService {}

import { MyService } from './myService.js';