Classi in JavaScript: constructor, metodi e new

Una classe è il progetto di un oggetto

Una classe descrive la forma e il comportamento di un tipo di oggetto. Definisci il progetto una volta, poi crei tutte le istanze che ti servono. Ogni istanza ha i propri dati ma condivide gli stessi metodi.

La forma di base:

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 { ... } definisce il progetto. new User(...) crea un'istanza. Ogni istanza riceve i propri name ed email, ma entrambe condividono l'unico metodo greet definito sulla classe.

Due istanze, due insiemi di dati, un solo insieme di metodi. Tutta l'idea è qui.

Il constructor prepara ogni istanza

Il constructor è un metodo speciale che viene eseguito esattamente una volta per istanza, nel momento in cui new la crea. Il suo compito è inizializzare il nuovo oggetto, di solito copiando gli argomenti su this:

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

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

Dentro il constructor, this si riferisce all'istanza nuova di zecca che si sta costruendo. Assegnare this.x = x mette x su quell'oggetto specifico. Ogni chiamata new Point(...) riceve il proprio this, e quindi i propri x e y.

Se non scrivi un constructor, JavaScript te ne dà uno vuoto gratis. Devi scriverlo solo quando hai davvero qualcosa da inizializzare.

È new a far funzionare il meccanismo

Chiamare una classe senza new genera un errore:

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

È voluto. new fa quattro cose, in quest'ordine:

1. Crea un nuovo oggetto vuoto.
2. Lo collega al prototype della classe (dove vivono i metodi).
3. Esegue il constructor con this legato al nuovo oggetto.
4. Restituisce il nuovo oggetto.

Senza new, niente di tutto questo accade. La classe impone la regola così non puoi dimenticartelo per sbaglio: un vero miglioramento rispetto ai tempi prima di class, quando dimenticare new corrompeva in silenzio l'oggetto globale.

I metodi sono condivisi, i campi sono per istanza

I metodi definiti nel corpo della classe vivono sul prototype: una sola copia condivisa da tutte le istanze. I campi di istanza (tutto ciò che assegni a this) sono invece per istanza, copie separate ogni volta.

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

Entrambe le istanze hanno il proprio count, quindi incrementarne una non influisce sull'altra. Ma a.increment e b.increment sono letteralmente la stessa funzione: salvata una volta sul prototype e cercata ogni volta che la chiami su un'istanza. Ecco perché le classi scalano a basso costo: mille istanze non creano mille copie di ogni metodo.

Campi di classe

Puoi dichiarare i campi di istanza in cima al corpo della classe, fuori dal constructor:

class Counter {
    count = 0;
    step = 1;

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

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

Le dichiarazioni dei campi vengono eseguite prima del corpo del constructor, come se fossero scritte all'inizio di constructor. Sono utili quando il valore iniziale non dipende dagli argomenti del constructor: è più pulito che riempire il constructor con this.count = 0; this.step = 1;.

Quando i valori dipendono dagli argomenti, lascia l'assegnazione nel constructor, dove gli argomenti sono nello scope.

Getter e setter

Un getter o un setter sembra un metodo ma si comporta come l'accesso a una proprietà. Leggi o assegni senza parentesi, e sotto viene eseguito il metodo:

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

Guarda come vengono usati: t.fahrenheit (senza parentesi) legge il getter, t.fahrenheit = 100 attiva il setter. Dall'esterno, fahrenheit sembra una proprietà normale, ma viene calcolata al volo a partire da celsius.

I getter sono ottimi per i valori derivati. I setter sono ottimi per validare o normalizzare un valore quando viene assegnato. Non abusarne: se un getter è costoso, chi legge il codice resterà sorpreso che un "accesso a una proprietà" faccia un lavoro vero.

Sintassi abbreviata dei metodi, nomi calcolati e this

Le definizioni dei metodi in una classe usano la sintassi abbreviata: niente parola chiave function, niente : tra nome e corpo:

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

Restituire this da add permette di concatenare i metodi: ogni chiamata restituisce la stessa istanza, così il metodo successivo può essere eseguito su di essa.

Un tranello: i metodi non sono legati automaticamente alla loro istanza. Se estrai un metodo e lo chiami da solo, this si perde:

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

Chiamare g.hello() funziona perché il . fornisce this. Chiamare fn() da solo no. Se ti serve un metodo staccato e già legato (un caso comune negli event handler), fai il bind nel constructor oppure usa un campo di classe con una arrow function: hello = () => \Hi, ${this.name}`;`.

Un piccolo esempio funzionante

Mettiamo insieme i pezzi: campi, constructor, metodi e un 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);

Si legge a colpo d'occhio: la classe descrive esattamente cos'è un BankAccount e cosa può fare.

In realtà le classi sono funzioni

Una cosa da assimilare: class è soprattutto zucchero sintattico. Sotto il cofano, una classe è una funzione (per la precisione una funzione costruttore) e i suoi metodi vivono su 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 è "function". greet vive su User.prototype. Le istanze trovano greet risalendo la catena dei prototype, lo stesso meccanismo che esiste nel linguaggio fin dal primo giorno. Le classi ti danno solo una sintassi pulita per configurarlo.

Questo modello mentale ripaga più avanti: ereditarietà, instanceof e il debug delle catene di prototype diventano molto più chiari quando ricordi che una classe è una funzione con i metodi appesi al suo prototype.

Prossimo passo: ereditarietà

Finora ogni classe è rimasta isolata. La maggior parte dei progetti reali costruisce gerarchie di classi: un Dog che è un tipo di Animal, un AdminUser che è un tipo di User. Se ne occupano le parole chiave extends e super, e sono l'argomento della prossima pagina.