Klasy w JavaScript: konstruktory, metody i słowo kluczowe new

Klasa to szablon obiektów

Klasa opisuje kształt i zachowanie pewnego rodzaju obiektów. Szablon definiujesz raz, a potem tworzysz tyle instancji, ile potrzebujesz. Każda instancja ma własne dane, ale wszystkie współdzielą te same metody.

Podstawowa postać:

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    greet() {
        return `Hi, I'm ${this.name}`;
    }
}

const ada = new User("Ada", "ada@example.com");
const boris = new User("Boris", "boris@example.com");

console.log(ada.greet());
console.log(boris.greet());

class User { ... } definiuje szablon. new User(...) tworzy instancję. Każda instancja dostaje własne name i email, ale obie współdzielą jedną metodę greet zdefiniowaną w klasie.

Dwie instancje, dwa zestawy danych, jeden zestaw metod. Na tym polega cała idea.

constructor przygotowuje każdą instancję

constructor to specjalna metoda, która wykonuje się dokładnie raz dla każdej instancji, w chwili gdy new ją tworzy. Jej zadaniem jest zainicjowanie świeżego obiektu, zwykle przez skopiowanie argumentów do this:

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

const p = new Point(3, 4);
console.log(p.x, p.y);

this wewnątrz konstruktora wskazuje na zupełnie nową, właśnie budowaną instancję. Przypisanie this.x = x umieszcza x na tym konkretnym obiekcie. Każde wywołanie new Point(...) dostaje własne this, a więc własne x i y.

Jeśli nie napiszesz konstruktora, JavaScript da ci pusty za darmo. Musisz go pisać tylko wtedy, gdy faktycznie masz coś do przygotowania.

new wprawia cały mechanizm w ruch

Wywołanie klasy bez new rzuca błąd:

const p = Point(3, 4);
// TypeError: Class constructor Point cannot be invoked without 'new'

To celowe. new robi po kolei cztery rzeczy:

1. Tworzy nowy pusty obiekt.
2. Łączy go z prototypem klasy (gdzie mieszkają metody).
3. Uruchamia constructor z this powiązanym z nowym obiektem.
4. Zwraca nowy obiekt.

Bez new nic z tego się nie dzieje. Klasa wymusza tę regułę, więc nie da się o niej przypadkiem zapomnieć. To realna poprawa w porównaniu z czasami sprzed class, gdy zapomniane new po cichu psuło obiekt globalny.

Metody są współdzielone, pola należą do instancji

Metody zdefiniowane w ciele klasy mieszkają w prototypie: jedna kopia współdzielona przez wszystkie instancje. Pola instancji (wszystko, co przypisujesz do this) są osobne dla każdej instancji, za każdym razem to oddzielna kopia.

class Counter {
    constructor() {
        this.count = 0;
    }

    increment() {
        this.count += 1;
    }
}

const a = new Counter();
const b = new Counter();

a.increment();
a.increment();
b.increment();

console.log(a.count, b.count);
console.log(a.increment === b.increment);

Obie instancje mają własne count, więc zwiększenie jednego nie wpływa na drugie. Ale a.increment i b.increment to dosłownie ta sama funkcja: zapisana raz w prototypie i wyszukiwana za każdym razem, gdy wywołujesz ją na instancji. Dlatego klasy tanio się skalują: tysiąc instancji nie tworzy tysiąca kopii każdej metody.

Pola klasy

Pola instancji możesz zadeklarować na początku ciała klasy, poza konstruktorem:

class Counter {
    count = 0;
    step = 1;

    increment() {
        this.count += this.step;
    }
}

const c = new Counter();
c.increment();
c.increment();
console.log(c.count);

Deklaracje pól wykonują się przed ciałem konstruktora, tak jakby były zapisane na początku constructor. Przydają się, gdy wartość początkowa nie zależy od argumentów konstruktora: to czytelniejsze niż zaśmiecanie konstruktora przez this.count = 0; this.step = 1;.

Gdy wartości zależą od argumentów, zostaw przypisanie w konstruktorze, gdzie argumenty są w zasięgu.

Gettery i settery

Getter albo setter wygląda jak metoda, ale zachowuje się jak dostęp do właściwości. Odczytujesz albo przypisujesz wartość bez nawiasów, a pod spodem wykonuje się metoda:

class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }

    get fahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value) {
        this.celsius = (value - 32) * 5 / 9;
    }
}

const t = new Temperature(20);
console.log(t.fahrenheit);

t.fahrenheit = 100;
console.log(t.celsius);

Zwróć uwagę na miejsca wywołania: t.fahrenheit (bez nawiasów) odczytuje getter, a t.fahrenheit = 100 uruchamia setter. Z zewnątrz fahrenheit wygląda jak zwykła właściwość, ale jest obliczana na bieżąco z celsius.

Gettery świetnie sprawdzają się przy wartościach pochodnych. Settery świetnie nadają się do walidacji albo normalizacji wartości przy przypisaniu. Nie nadużywaj ich: jeśli getter jest kosztowny, czytelnik kodu zdziwi się, że "odczyt właściwości" wykonuje prawdziwą pracę.

Skrócony zapis metod, nazwy obliczane i this

Definicje metod w klasie używają skróconej składni: bez słowa kluczowego function i bez : między nazwą a ciałem:

class Playlist {
    constructor(name) {
        this.name = name;
        this.tracks = [];
    }

    add(track) {
        this.tracks.push(track);
        return this;
    }

    size() {
        return this.tracks.length;
    }
}

const p = new Playlist("Focus")
    .add("Clair de Lune")
    .add("Gymnopédie No. 1");

console.log(p.name, p.size());

Zwracanie this z add umożliwia łańcuchowe wywoływanie metod: każde wywołanie oddaje tę samą instancję, więc na niej może wykonać się kolejna metoda.

Jedna pułapka: metody nie są automatycznie powiązane ze swoją instancją. Jeśli wyciągniesz metodę i wywołasz ją osobno, this przepada:

class Greeter {
    constructor(name) {
        this.name = name;
    }

    hello() {
        return `Hi, ${this.name}`;
    }
}

const g = new Greeter("Ada");
const fn = g.hello;
// console.log(fn());          // TypeError: Cannot read properties of undefined

console.log(g.hello.bind(g)()); // works
console.log(g.hello());         // works

Wywołanie g.hello() działa, bo . dostarcza this. Samodzielne wywołanie fn() już nie. Jeśli potrzebujesz odłączonej, wcześniej powiązanej metody (częsty przypadek w obsłudze zdarzeń), powiąż ją w konstruktorze albo użyj pola klasy z funkcją strzałkową: hello = () => \Hi, ${this.name}`;`.

Mały działający przykład

Składamy wszystkie elementy razem: pola, konstruktor, metody i getter:

class BankAccount {
    balance = 0;

    constructor(owner, opening = 0) {
        this.owner = owner;
        this.balance = opening;
    }

    deposit(amount) {
        this.balance += amount;
        return this;
    }

    withdraw(amount) {
        if (amount > this.balance) throw new Error("Insufficient funds");
        this.balance -= amount;
        return this;
    }

    get summary() {
        return `${this.owner}: $${this.balance}`;
    }
}

const acct = new BankAccount("Rosa", 100).deposit(50).withdraw(30);
console.log(acct.summary);

Czytelne na pierwszy rzut oka: klasa opisuje dokładnie, czym jest BankAccount i co potrafi.

Klasy to tak naprawdę funkcje

Jedna rzecz, którą warto przyswoić: class to głównie lukier składniowy. Pod spodem klasa jest funkcją, a dokładnie funkcją konstruktora, a jej metody mieszkają w ClassName.prototype:

class User {
    constructor(name) { this.name = name; }
    greet() { return `Hi, ${this.name}`; }
}

console.log(typeof User);
console.log(User.prototype.greet);
console.log(new User("Ada").greet === User.prototype.greet);

typeof User to "function". greet mieszka w User.prototype. Instancje znajdują greet przez łańcuch prototypów, czyli ten sam mechanizm, który jest w języku od pierwszego dnia. Klasy dają ci po prostu czystą składnię do jego ustawienia.

Ten model myślowy opłaca się później: dziedziczenie, instanceof i debugowanie łańcuchów prototypów stają się bardziej zrozumiałe, gdy pamiętasz, że klasa to funkcja z metodami zawieszonymi na jej prototypie.

Dalej: dziedziczenie

Na razie każda klasa stoi osobno. Większość prawdziwych projektów buduje hierarchie klas: Dog, który jest rodzajem Animal, albo AdminUser, który jest rodzajem User. Zajmują się tym słowa kluczowe extends i super, a o nich jest następna strona.