从零开始：JavaScript面向对象编程的实战案例解析

在JavaScript的世界里，面向对象编程（OOP）是一种强大的编程范式，它允许开发者以更贴近现实世界的方式组织和构建代码。从零开始学习JavaScript面向对象编程，并通过实战案例来解析其应用，能够帮助你更快地掌握这门语言的精髓。

类和对象的创建

在JavaScript中，类（Class）是创建对象的蓝图。通过使用class关键字，我们可以定义一个类，并创建多个对象实例。

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

  introduce() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1.introduce(); // 输出：Hello, my name is Alice and I am 25 years old.
person2.introduce(); // 输出：Hello, my name is Bob and I am 30 years old.

在上面的例子中，我们定义了一个Person类，其中包含一个构造函数constructor和introduce方法。通过new关键字，我们创建了两个Person对象实例，并分别调用了它们的introduce方法。

继承和多态

JavaScript支持继承，这意味着一个类可以继承另一个类的属性和方法。此外，多态允许我们使用父类类型的引用来调用子类的方法。

class Employee extends Person {
  constructor(name, age, department) {
    super(name, age);
    this.department = department;
  }

  introduce() {
    console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I work in the ${this.department} department.`);
  }
}

const employee1 = new Employee('Charlie', 28, 'HR');
employee1.introduce(); // 输出：Hello, my name is Charlie, I am 28 years old, and I work in the HR department.

在上述代码中，Employee类继承自Person类，并添加了一个新的属性department。同时，introduce方法被重写以包含部门信息。

封装和私有属性

JavaScript提供了#前缀来定义私有属性，这些属性只能在类的内部访问。

class BankAccount {
  #balance;

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

  deposit(amount) {
    this.#balance += amount;
  }

  withdraw(amount) {
    if (amount > this.#balance) {
      throw new Error('Insufficient funds');
    }
    this.#balance -= amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 输出：1500
account.withdraw(200);
console.log(account.getBalance()); // 输出：1300

在BankAccount类中，#balance是一个私有属性，只能在类内部访问。deposit和withdraw方法用于管理账户余额，而getBalance方法用于获取账户余额。

实战案例：构建一个简单的待办事项列表

现在，让我们通过一个简单的待办事项列表案例来应用我们学到的面向对象编程知识。

class TodoList {
  constructor() {
    this.todos = [];
  }

  addTodo(task) {
    this.todos.push(task);
  }

  removeTodo(index) {
    this.todos.splice(index, 1);
  }

  listTodos() {
    this.todos.forEach((task, index) => {
      console.log(`${index + 1}. ${task}`);
    });
  }
}

const todoList = new TodoList();
todoList.addTodo('Buy groceries');
todoList.addTodo('Do laundry');
todoList.listTodos(); // 输出：
// 1. Buy groceries
// 2. Do laundry
todoList.removeTodo(1);
todoList.listTodos(); // 输出：
// 1. Buy groceries

在这个案例中，我们创建了一个TodoList类，它包含添加、删除和列出待办事项的方法。通过创建TodoList对象实例，我们可以管理待办事项列表。

通过这些实战案例，你不仅能够理解JavaScript面向对象编程的概念，还能够将这些概念应用到实际项目中。记住，实践是掌握任何技能的关键，不断尝试和练习，你将逐渐成为一名熟练的JavaScript开发者。