Poziom klasy a poziom instancji

Część sekcji Programowanie obiektowe ścieżki JavaScript w Coddy. Lekcja 31 z 56.

W klasach JavaScript istnieją dwa odrębne poziomy właściwości i metod:

Poziom instancji: właściwości i metody należące do każdego obiektu utworzonego na podstawie klasy.
Poziom klasy: właściwości i metody należące do samej klasy, a nie do instancji.

Zrozummy różnicę:

Najpierw przyjrzyjmy się składowym instancji. Utwórz zwykłą klasę z metodą instancji:

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

Utwórz instancję klasy Car:

const myCar = new Car("Toyota");

Wywołaj metodę instancji:

console.log(myCar.drive()); // Wyświetla: "The Toyota is driving"

Zauważ, że każda instancja może wywołać metodę drive, którą współdzielą wszystkie instancje, a wewnątrz niej this odnosi się do instancji, na której ją wywołano, więc odczytuje jej własne właściwości.

Teraz przyjrzyjmy się składowym klasy. Dodajemy do naszej klasy metodę statyczną. Użyj słowa kluczowego static przed nazwą metody, aby utworzyć metodę należącą do samej klasy, a nie do jej instancji.

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}`;
  }
}

Metody statyczne są przydatne w przypadku funkcji użytkowych, które nie zależą od danych konkretnej instancji. Metoda statyczna jest wywoływana na samej klasie, a nie na instancjach:

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

console.log(Car.compareModels(car1, car2)); // Wyświetla: "Comparing Toyota with Honda"

Próba wywołania metody statycznej na instancji spowoduje błąd:

car1.compareModels(car1, car2); // Błąd: car1.compareModels nie jest funkcją

Wyzwanie

Otrzymujesz klasę Calculator, która ma tylko konstruktor. Twoim zadaniem jest dodanie dwóch metod:

1. Metoda instancji <strong>add(number)</strong>

Dodaje podaną liczbę do bieżącej wartości kalkulatora
Aktualizuje this.value i zwraca nową wartość
*Jest wywoływana na instancjach kalkulatora: calc.add(3)

2. Metoda statyczna <strong>multiply(num1, num2)</strong>

Przyjmuje dwie liczby i zwraca ich iloczyn
NIE używa this (metody statyczne nie mają danych instancji)
*Jest wywoływana na samej klasie Calculator: Calculator.multiply(4, 6)

Spróbuj swoich sił

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


// Nie modyfikuj poniższego kodu
const calc = new Calculator(5);        // Tworzy kalkulator z wartością = 5
const result1 = calc.add(3);           // Powinno dodać 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Powinno pomnożyć 4 × 6 = 24
console.log(result1);                   // Oczekiwany wynik: 8
console.log(result2);                   // Oczekiwany wynik: 24