Ereditarietà in JavaScript: extends, super e override dei metodi

Una classe che si basa su un'altra

L'ereditarietà permette a una classe di partire dal progetto di un'altra classe ed estenderlo. Ricevi gratis ogni campo e metodo della classe padre, e puoi aggiungere o cambiare tutto ciò che ti serve:

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 significa: "un Dog è un Animal, più qualcosa in più". rex non ha un metodo speak proprio, ma la ricerca risale fino ad Animal, che invece ce l'ha. Questo risalire è tutto il meccanismo: è semplicemente la catena dei prototipi con una sintassi più gradevole.

super nel costruttore

Una sottoclasse con un costruttore proprio ha una regola rigida: chiama super(...) prima di toccare this. super esegue il costruttore della classe padre, che è quello che crea e inizializza davvero l'oggetto:

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);

Se salti la riga super(name) otterrai un ReferenceError nel momento in cui provi a leggere o scrivere this. Il motore si rifiuta semplicemente di darti un this finché la classe padre non ha fatto la sua parte.

Se una sottoclasse non dichiara un costruttore proprio, JavaScript ne genera uno che passa tutti gli argomenti a super: quindi devi scriverlo solo quando aggiungi campi o fai qualche inizializzazione in più.

Override dei metodi

Una sottoclasse può ridefinire qualsiasi metodo ereditato. Vince quello più vicino nella catena:

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());

Nessuna magia: quando chiami speak() su un Dog, il motore cerca speak sull'istanza, poi su Dog.prototype, lo trova e si ferma. Non arriva mai ad Animal.prototype.

Estendere, non sostituire: super.method()

A volte non vuoi sostituire il metodo della classe padre, ma aggiungere qualcosa. super.method(...) chiama la versione della classe padre dall'interno dell'override:

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());

È qui che l'ereditarietà si guadagna il suo posto: la sottoclasse riutilizza la logica della classe padre invece di copiarla. Se in futuro Animal.describe cambia, Dog.describe riceve la modifica gratis.

super funziona in qualsiasi metodo, non solo nel costruttore. Si riferisce sempre alla versione della classe padre di ciò che stai chiamando.

instanceof e la catena

instanceof controlla se la catena dei prototipi di un oggetto include una certa classe. Ogni istanza di una sottoclasse è anche un'istanza delle classi padre:

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);

Tutti e quattro valgono true. La catena è Puppy -> Dog -> Animal -> Object, e instanceof la percorre. È utile per i controlli di tipo, anche se in pratica lo userai meno di quanto pensi: la maggior parte del codice chiama semplicemente i metodi e lascia che il polimorfismo faccia il resto.

Un esempio un po' più grande

Uno schema comune: una classe base con la logica condivisa e un paio di sottoclassi che la specializzano.

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()));

Nota che describe vive su Shape e non va mai riscritto: chiama semplicemente this.area(), che a runtime si risolve nella sottoclasse giusta. Questo è il polimorfismo: stessa chiamata, comportamento diverso in base all'oggetto reale.

Ereditarietà contro composizione

L'ereditarietà è allettante perché sembra produttiva: una riga ti dà una montagna di metodi. Ma invecchia male quando le gerarchie crescono.

Regola pratica: usa extends quando la relazione è chiaramente "X è un Y" e la sottoclasse condivide davvero gran parte del comportamento della classe padre. Quando usi l'ereditarietà solo per condividere uno o due metodi helper, preferisci la composizione: dai alla classe un campo che contiene l'oggetto helper.

// 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();

Gli alberi di ereditarietà profondi (Animal -> Mammal -> Dog -> WorkingDog -> PoliceDog) sembrano ordinati nei diagrammi e diventano dolorosi nel codice: una modifica vicino alla radice si propaga in modo imprevedibile in ogni discendente. La maggior parte dei progetti sani resta su uno o due livelli e usa la composizione per il resto.

Prossimo passo: membri statici

Tutto ciò che hai visto in questa pagina vive sulle istanze: metodi che chiami con new Thing().something(). A volte vuoi metodi o dati che appartengono alla classe stessa, non a una particolare istanza. È a questo che serve static, ed è l'argomento della prossima pagina.