Avanzato18 min

Prototipi e Classi

Il sistema di ereditarietà prototipale di JavaScript e la sintassi moderna delle classi ES6.

Prototipi e Classi

JavaScript non ha classi nel senso tradizionale — ha un sistema di ereditarietà prototipale. Le classi ES6 sono "zucchero sintattico" sopra questo sistema. Capire i prototipi è la chiave per padroneggiare il linguaggio.

La catena dei prototipi

Ogni oggetto in JavaScript ha un collegamento nascosto ([[Prototype]]) a un altro oggetto. Quando accedi a una proprietà, JS la cerca prima sull'oggetto, poi risale la catena:

javascript

const animale = {
  mangia() {
    console.log("Sto mangiando");
  },
};

const cane = Object.create(animale);
cane.abbaia = function() {
  console.log("Bau!");
};

cane.abbaia();  // "Bau!" — trovato sull'oggetto
cane.mangia();  // "Sto mangiando" — trovato sul prototipo

Classi ES6

javascript

class Veicolo {
  constructor(marca, modello) {
    this.marca = marca;
    this.modello = modello;
  }

  descrivi() {
    return \`\${this.marca} \${this.modello}\`;
  }
}

class Auto extends Veicolo {
  #chilometri = 0; // campo privato

  constructor(marca, modello, anno) {
    super(marca, modello);
    this.anno = anno;
  }

  guida(km) {
    this.#chilometri += km;
  }

  get km() {
    return this.#chilometri;
  }
}

const miaAuto = new Auto("Fiat", "500", 2024);
miaAuto.guida(150);
console.log(miaAuto.km); // 150

Campi e metodi statici

javascript

class Contatore {
  static #istanze = 0;

  constructor() {
    Contatore.#istanze++;
  }

  static quanteIstanze() {
    return Contatore.#istanze;
  }
}

I campi privati (#) e i metodi statici rendono le classi JavaScript simili a quelle di linguaggi come Java, ma sotto il cofano è sempre il sistema prototipale a funzionare.