JavaScript中什么是类，如何使用？

在JavaScript中，类是一种用于创建对象的模板。它定义了对象的属性和方法，并可以通过实例化来创建具体的对象。类提供了一种结构化的方式来组织和管理代码，使得代码更易于理解和维护。

下面我将通过三个例子来详细说明JavaScript中类的概念和使用方法。

例子1：创建一个表示人的类

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

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

const person1 = new Person('Alice', 25);
person1.sayHello(); // 输出: Hello, my name is Alice and I'm 25 years old.

这段代码定义了一个名为Person的JavaScript类，用于创建表示人的对象。下面是对代码的详细解析：

1. 类定义：

   • class Person { ... }：声明了一个名为Person的类。在JavaScript中，类是一种特殊的函数，用于创建具有特定属性和方法的对象（即实例）。

2. 构造函数：

   • constructor(name, age) { ... }：这是Person类的构造函数。构造函数会在使用new关键字创建类的实例时自动调用。
   • this.name = name; 和 this.age = age;：这两行代码分别将传入的name和age参数赋值给新创建的实例的name和age属性。

3. 方法定义：

   • sayHello() { ... }：这是Person类的一个方法，用于让实例能够输出自我介绍信息。
   • console.log(Hello, my name is ${this.name} and I'm ${this.age} years old.);：该行代码在控制台打印一条消息，其中${this.name}和${this.age}是模板字符串的占位符，会被this.name和this.age的实际值替换，展示实例的名字和年龄。

4. 创建实例：

   • const person1 = new Person('Alice', 25);：这行代码通过调用Person类的构造函数并传入'Alice'和25作为参数，创建了一个名为person1的Person实例。此时，person1对象具有name属性（值为'Alice'）和age属性（值为25）。

5. 方法调用：

   • person1.sayHello();：调用person1实例的sayHello方法，执行结果是在控制台输出Hello, my name is Alice and I'm 25 years old.。这里展示了person1实例的名称和年龄。

总结：这段代码展示了如何使用ES6的类语法定义一个简单的类Person，以及如何创建这个类的实例并调用其方法来输出信息。

例子2：创建一个表示图形的类

class Shape {
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return this.color;
  }

  setColor(newColor) {
    this.color = newColor;
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

const circle1 = new Circle('red', 5);
console.log(circle1.getColor()); // 输出: red
circle1.setColor('blue');
console.log(circle1.getColor()); // 输出: blue
console.log(circle1.getArea()); // 输出: 78.54

这段代码展示了JavaScript中的类继承和多态特性，具体解析如下：

1. 基类 Shape 定义:

   • constructor(color)：Shape 类的构造函数接收一个参数 color，并将其保存到实例的 color 属性中。
   • getColor()：返回实例的 color 属性值。
   • setColor(newColor)：设置实例的 color 属性为新的颜色值 newColor。

2. 子类 Circle 定义:

   • extends Shape：表示 Circle 类继承自 Shape 类，将继承 Shape 类的所有属性和方法。
   • constructor(color, radius)：Circle 类的构造函数，首先通过 super(color) 调用父类 Shape 的构造函数以初始化 color 属性，然后设置 Circle 特有的属性 radius。
   • getArea()：计算并返回圆的面积，公式为 π * radius^2，这里使用 Math.PI 获取π的值。

3. 创建 Circle 实例:

   • const circle1 = new Circle('red', 5);：创建了一个名为 circle1 的 Circle 类实例，其颜色为 'red'，半径为 5。

4. 方法调用与输出:

   • console.log(circle1.getColor()); // 输出: red：调用 circle1 的 getColor 方法，输出其颜色属性，即 'red'。
   • circle1.setColor('blue');：调用 circle1 的 setColor 方法，将其颜色改为 'blue'。
   • console.log(circle1.getColor()); // 输出: blue：再次调用 getColor 方法，确认颜色已更改为 'blue'。
   • console.log(circle1.getArea()); // 输出: 78.54：调用 getArea 方法计算并输出圆的面积，根据半径 5 计算出大约为 78.54（实际计算结果应为 78.53981633974483，四舍五入后接近 78.54）。

总结：这段代码演示了如何定义一个基类（Shape）和一个继承自基类的子类（Circle），以及如何在子类中添加新的属性和方法，并展示了实例化子类对象、调用继承和自定义方法的过程。

例子3：创建一个表示计算器的类

class Calculator {
  constructor() {
    this.result = 0;
  }

  add(number) {
    this.result += number;
  }

  subtract(number) {
    this.result -= number;
  }

  multiply(number) {
    this.result *= number;
  }

  divide(number) {
    this.result /= number;
  }

  clear() {
    this.result = 0;
  }

  getResult() {
    return this.result;
  }
}

const calculator = new Calculator();
calculator.add(5);
calculator.multiply(2);
calculator.subtract(3);
console.log(calculator.getResult()); // 输出: 7
calculator.clear();
console.log(calculator.getResult()); // 输出: 0

这段代码定义了一个名为Calculator的JavaScript类，用于执行基本的数学运算并追踪结果。以下是代码的详细解析：

Calculator 类定义

javascript

class Calculator { constructor() { this.result = 0; } // ... }

• 构造函数 (constructor): 当使用new关键字创建Calculator类的实例时，构造函数会被自动调用。这里它初始化了一个名为result的属性，并将其值设为0，用于存储计算结果。

方法定义

• add(number): 接受一个数字参数number，并将它加到当前的result上。

• subtract(number): 接受一个数字参数number，并从当前的result中减去它。

• multiply(number): 接受一个数字参数number，并将当前的result乘以它。

• divide(number): 接受一个数字参数number，并将当前的result除以它。

• clear(): 将result重置为0，清空计算结果。

• getResult(): 返回当前的result值，即计算的结果。

实例化与操作

javascript

const calculator = new Calculator();

• 创建了一个Calculator类的实例，并将其赋值给变量calculator。

接下来的一系列操作展示了如何使用这个计算器实例：

javascript

calculator.add(5); calculator.multiply(2); calculator.subtract(3);

1. 添加5: result变为5（初始为0）。
2. 乘以2: result变为10（当前为5）。
3. 减去3: result变为7（当前为10）。

javascript

console.log(calculator.getResult()); // 输出: 7

• 打印当前的计算结果，即7。

javascript

calculator.clear(); console.log(calculator.getResult()); // 输出: 0

• 调用clear方法清空结果，然后再次打印结果，显示为0。

综上所述，这段代码展示了如何定义一个简单的计算器类，以及如何使用这个类的实例进行数学运算并管理计算结果。