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 pojedynczego obiektu utworzonego na podstawie klasy.
Poziom klasy: właściwości i metody należące do samej klasy, a nie do jej instancji.

Przyjrzyjmy się różnicy:

Najpierw przyjrzyjmy się elementom 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()); // Wypisuje: "The Toyota is driving"

Zauważ, że każda instancja otrzymuje własną kopię metody drive i może uzyskiwać dostęp do własnych właściwości za pomocą this.

Teraz przyjrzyjmy się elementom na poziomie 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 pomocniczych, 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 bezpośrednio na 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);                   // Oczekiwane: 8
console.log(result2);                   // Oczekiwane: 24