类级别与实例级别

本课属于 Coddy JavaScript 学习旅程的“面向对象编程”单元。第 31 课，共 56 课。

在 JavaScript 类中，属性和方法分为两个不同的层级：

实例级：属于通过类创建的每个对象的属性和方法。
类级：属于类本身而不是实例的属性和方法。

让我们了解一下它们的区别：

首先，我们来看看实例级成员。创建一个包含实例方法的普通类：

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

创建一个 Car 类的实例：

const myCar = new Car("Toyota");

调用实例方法：

console.log(myCar.drive()); // 输出：“The Toyota is driving”

注意，每个实例都可以调用所有实例共享的 drive 方法。在这个方法中，this 指的是调用它的实例，因此会读取该实例自己的属性。

现在，我们来看看类级成员。我们为类添加一个静态方法。在方法名前使用 static 关键字，可以创建一个属于类本身而不是实例的方法。

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

静态方法适用于不依赖特定实例数据的实用函数。静态方法是通过类本身调用的，而不是通过实例调用：

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // 输出：“Comparing Toyota with Honda”

尝试在实例上调用静态方法会导致错误：

car1.compareModels(car1, car2); // 错误：car1.compareModels 不是函数

挑战

给你一个只有构造函数的 Calculator 类。你的任务是添加两个方法：

1. 实例方法 add(number)

将给定的数字加到计算器当前的值上
更新 this.value 并返回新值
*在计算器实例上调用：calc.add(3)

2. 静态方法 multiply(num1, num2)

接收两个数字并返回它们的乘积
不使用 this（静态方法没有实例数据）
*在 Calculator 类本身上调用：Calculator.multiply(4, 6)

亲手试试

import { Calculator } from './calculator.js';


// 不要修改下面的代码
const calc = new Calculator(5);        // 创建值为 5 的计算器
const result1 = calc.add(3);           // 应加上 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // 应计算 4 × 6 = 24
console.log(result1);                   // 预期输出：8
console.log(result2);                   // 预期输出：24