Уровень класса против уровня экземпляра

Часть раздела Объектно-ориентированное программирование путешествия по JavaScript на Coddy — урок 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. Метод экземпляра <strong>add(number)</strong>

Добавляет заданное число к текущему значению калькулятора
Обновляет this.value и возвращает новое значение
*Вызывается на экземплярах калькулятора: calc.add(3)

2. Статический метод <strong>multiply(num1, num2)</strong>

Принимает два числа и возвращает их произведение
НЕ использует this (статические методы не имеют доступа к данным экземпляра)
*Вызывается непосредственно у класса Calculator: Calculator.multiply(4, 6)

Шпаргалка

Классы JavaScript имеют два уровня свойств и методов:

Уровень экземпляра: Принадлежат каждому отдельному объекту, созданному на основе класса
Уровень класса: Принадлежат самому классу, а не его экземплярам

Методы экземпляра:

Обычные методы, которые могут обращаться к свойствам экземпляра с помощью this:

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

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

Статические методы:

Используйте ключевое слово static для создания методов, которые принадлежат самому классу. Они вызываются у класса, а не у экземпляров:

class Car {
  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); // Error: car1.compareModels is not a function

Статические методы полезны для вспомогательных функций, которые не зависят от данных конкретного экземпляра.

Попробуйте сами

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