Dziedziczenie w JavaScript: extends, super i nadpisywanie metod

Jedna klasa zbudowana na drugiej

Dziedziczenie pozwala klasie zacząć od planu innej klasy i go rozszerzyć. Każde pole i metodę rodzica dostajesz za darmo, a do tego możesz dodać lub zmienić, co tylko potrzebujesz:

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

    speak() {
        return `${this.name} makes a sound`;
    }
}

class Dog extends Animal {
    fetch() {
        return `${this.name} fetches the ball`;
    }
}

const rex = new Dog("Rex");
console.log(rex.speak());
console.log(rex.fetch());

Dog extends Animal znaczy: „Dog to Animal, plus coś jeszcze”. rex nie ma własnej metody speak, ale wyszukiwanie przechodzi dalej do Animal, która ją ma. To przechodzenie dalej jest całym mechanizmem: to po prostu łańcuch prototypów z ładniejszą składnią.

super w konstruktorze

Podklasa z własnym konstruktorem ma jedną twardą zasadę: wywołaj super(...), zanim dotkniesz this. super uruchamia konstruktor rodzica, który faktycznie tworzy i inicjalizuje obiekt:

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

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}

const rex = new Dog("Rex", "Labrador");
console.log(rex.name, rex.breed);

Pomiń linię super(name), a dostaniesz ReferenceError w chwili, gdy spróbujesz odczytać lub zapisać this. Silnik po prostu nie da ci this, dopóki rodzic nie zrobi swojego.

Jeśli podklasa nie deklaruje własnego konstruktora, JavaScript generuje taki, który przekazuje wszystkie argumenty do super. Własny konstruktor piszesz więc tylko wtedy, gdy dodajesz pola albo robisz dodatkową konfigurację.

Nadpisywanie metod

Podklasa może na nowo zdefiniować każdą odziedziczoną metodę. Wygrywa ta, która jest najbliżej w łańcuchu:

class Animal {
    speak() {
        return "generic animal noise";
    }
}

class Dog extends Animal {
    speak() {
        return "woof";
    }
}

class Cat extends Animal {
    speak() {
        return "meow";
    }
}

console.log(new Animal().speak());
console.log(new Dog().speak());
console.log(new Cat().speak());

Żadnej magii: gdy wywołujesz speak() na obiekcie Dog, silnik szuka speak na instancji, potem na Dog.prototype, znajduje ją i się zatrzymuje. Do Animal.prototype w ogóle nie dochodzi.

Rozszerzanie zamiast zastępowania: super.method()

Czasem nie chcesz zastąpić metody rodzica, tylko coś do niej dodać. super.method(...) wywołuje wersję rodzica z wnętrza nadpisanej metody:

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

    describe() {
        return `I am ${this.name}`;
    }
}

class Dog extends Animal {
    describe() {
        const base = super.describe();
        return `${base}, and I am a dog`;
    }
}

console.log(new Dog("Rex").describe());

Tu dziedziczenie naprawdę się opłaca: podklasa ponownie wykorzystuje logikę rodzica zamiast ją kopiować. Jeśli Animal.describe później się zmieni, Dog.describe automatycznie przejmie zmianę.

super działa w każdej metodzie, nie tylko w konstruktorze. Zawsze odnosi się do wersji z klasy rodzica tego, co wywołujesz.

instanceof i łańcuch prototypów

instanceof sprawdza, czy łańcuch prototypów obiektu zawiera daną klasę. Każda instancja podklasy jest też instancją jej rodziców:

class Animal {}
class Dog extends Animal {}
class Puppy extends Dog {}

const p = new Puppy();
console.log(p instanceof Puppy);
console.log(p instanceof Dog);
console.log(p instanceof Animal);
console.log(p instanceof Object);

Wszystkie cztery dają true. Łańcuch wygląda tak: Puppy -> Dog -> Animal -> Object, a instanceof po nim przechodzi. Przydaje się do sprawdzania typów, choć w praktyce używa się go rzadziej, niż można by pomyśleć: większość kodu po prostu wywołuje metody, a resztą zajmuje się polimorfizm.

Trochę większy przykład

Częsty wzorzec: klasa bazowa ze wspólną logiką i kilka podklas, które ją specjalizują.

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

    area() {
        return 0;
    }

    describe() {
        return `${this.name} with area ${this.area().toFixed(2)}`;
    }
}

class Circle extends Shape {
    constructor(radius) {
        super("Circle");
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius ** 2;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super("Rectangle");
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

const shapes = [new Circle(5), new Rectangle(4, 6)];
shapes.forEach(s => console.log(s.describe()));

Zauważ, że describe mieszka w Shape i nigdy nie trzeba jej przepisywać: po prostu wywołuje this.area(), które w czasie działania programu trafia do właściwej podklasy. To polimorfizm: to samo wywołanie, różne zachowanie zależnie od faktycznego obiektu.

Dziedziczenie kontra kompozycja

Dziedziczenie kusi, bo daje poczucie produktywności: jedna linia i masz stos metod. Gorzej, gdy hierarchie rosną, bo wtedy źle się starzeje.

Praktyczna zasada: używaj extends, gdy relacja to wyraźnie „X jest Y”, a podklasa naprawdę współdzieli większość zachowania rodzica. Jeśli sięgasz po dziedziczenie tylko po to, żeby współdzielić jedną czy dwie metody pomocnicze, wybierz kompozycję: daj klasie pole przechowujące obiekt pomocniczy:

// Composition: User "has a" logger, not "is a" logger.
class Logger {
    log(message) {
        console.log(`[log] ${message}`);
    }
}

class User {
    constructor(name) {
        this.name = name;
        this.logger = new Logger();
    }

    greet() {
        this.logger.log(`Hello from ${this.name}`);
    }
}

new User("Ada").greet();

Głębokie drzewa dziedziczenia (Animal -> Mammal -> Dog -> WorkingDog -> PoliceDog) wyglądają schludnie na diagramach, ale w kodzie robią się bolesne: zmiana blisko korzenia rozchodzi się nieprzewidywalnie po wszystkich potomkach. Większość zdrowych projektów ma jeden lub dwa poziomy, a w pozostałych przypadkach opiera się na kompozycji.

Dalej: składowe statyczne

Wszystko w tym artykule żyje na instancjach: to metody, które wywołujesz przez new Thing().something(). Czasem jednak chcesz metod lub danych, które należą do samej klasy, a nie do konkretnej instancji. Do tego służy static i o tym jest następna strona.