基于JavaScript 类的使用详解

基于 JavaScript 类的使用详解

JavaScript 的 Class 定义是一种专门为对象的构建提供的语法糖。在ES6之前，JavaScript没有类(class)的概念，只能通过构造函数和原型对象来实现。

类的定义和语法

定义一个类可以使用 class 关键字，后面跟着类名和一对大括号 {}。大括号内部可以定义类的属性和方法。使用 constructor 方法来定义当对象实例化时所执行的构造函数。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greeting() {
    console.log(`My name is ${this.name} and I'm ${this.age} years old.`);
  }
}

以上是一个最基本的类的定义。在类的构造函数上，接收了两个参数，分别为 name 和 age，类实例化时需传入这两个参数。在类中，我们还定义了一个 greeting() 方法用来向控制台输出类实例的信息。

实例化一个类

实例化类时，需要使用 new 操作符来调用类的构造函数，并返回一个类的实例。

const person1 = new Person('John', 30);
person1.greeting();

以上代码将会输出：

My name is John and I'm 30 years old.

类的继承

类的继承是一种面向对象编程中非常重要的概念，它允许我们创建一个新的类，从一个已经存在的类上继承属性和方法。

class Customer extends Person {
  constructor(name, age, balance) {
    super(name, age);
    this.balance = balance;
  }
  getInfo() {
    return `${this.name} owes ${this.balance}.00`;
  }
}

在以上示例中，我们创建了一个 Customer 类，并将其从 Person 类上继承下来。Customer 类比 Person 类更加具体，包含额外的 balance 属性，并修改了 getInfo() 方法以反映出这个新增的属性。super() 方法调用了父类的构造器，因此在 Customer 类中，我们可以直接调用 this.name 和 this.age。

接下来，我们可以通过 new 操作符来实例化一个 Customer 对象。

const customer1 = new Customer('Tom', 35, 200);
console.log(customer1.greeting()); // My name is Tom and I'm 35 years old.
console.log(customer1.getInfo()); // Tom owes 200.00

输出结果为：

My name is Tom and I'm 35 years old.
Tom owes 200.00

示例 1：使用类定义一个矩形对象，并计算其面积和周长

我们可以创建一个用于计算矩形面积和周长的类。

class Rectangle {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }

  // 计算矩形的周长
  perimeter() {
    return 2 * (this.length + this.width);
  }

  // 计算矩形的面积
  area() {
    return this.length * this.width;
  }
}

在以上示例中，声明了一个 Rectangle 类，其构造函数接收两个参数 length 和 width。我们也声明了两个方法 perimeter() 和 area()，以分别计算矩形的周长和面积。

接下来，我们可以实例化一个 Rectangle 对象，并使用其 perimeter() 和 area() 方法来计算矩形的周长和面积。

const rectangle1 = new Rectangle(5, 10);

console.log(rectangle1.perimeter()); // 30
console.log(rectangle1.area()); // 50

输出的结果为：

30
50

示例 2：用一个类管理一个 TODO 列表

我们也可以使用类来管理一个简单的 Todo List。在以下示例中，我们创建了一个 Todo 类，每个 Todo 实例都包含两个属性：text 和 isCompleted。我们可以通过 addTodo() 方法将待办事项添加到列表中。我们还实现了 deleteTodo() 方法，以便从列表中删除已完成的任务。

class Todo {
  constructor() {
    this.list = [];
  }

  // 添加待办事项
  addTodoItem(text) {
    const todo = {
      text: text,
      isCompleted: false
    };
    this.list.push(todo);
  }

  // 删除已完成的任务
  deleteCompletedItems() {
    this.list = this.list.filter(todo => !todo.isCompleted);
  }

  // 设置任务为已完成
  setTodoItemComplete(index) {
    this.list[index].isCompleted = true;
  }

  // 输出任务列表
  displayTodoList() {
    console.log(this.list);
  }
}

以上代码创建了一个 Todo 类，其构造函数定义了一个空的 list 数组，其中 addTodoItem() 方法以待办事项的名字作为参数，将一个代办事项添加到列表中。我们还实现了 deleteCompletedItems() 方法，以便从列表中删除已完成的任务；setTodoItemComplete() 方法，以将任务标记为已完成；displayTodoList() 方法，以将所有待办任务输出到控制台。

以下是如何实例化 Todo 类，并向其列表中添加、删除和完成任务的示例。

const todoList = new Todo();

todoList.addTodoItem('Buy milk');
todoList.addTodoItem('Learn JavaScript');
todoList.displayTodoList(); // 输出两个待办事项对象

// 将第1项任务标记为已完成
todoList.setTodoItemComplete(0);
todoList.displayTodoList(); // 输出两个待办事项对象，但第1项任务被标记为已完成

// 删除已完成过的任务
todoList.deleteCompletedItems();
todoList.displayTodoList(); // 输出1个待办事项，即“Learn JavaScript”