Classi e Object-Oriented Programming

Introduzione

L’Object-Oriented Programming (OOP) è un approccio alla programmazione che organizza il codice attorno a oggetti che rappresentano entità del mondo reale. In JavaScript, questo approccio può essere implementato usando classi, che fungono da blueprint (progetti) per creare oggetti con struttura e comportamento comuni.

Le classi permettono di definire una volta la struttura e la logica di un tipo di oggetto, per poi creare istanze multiple con dati diversi ma stessa struttura. Questo riduce la duplicazione del codice e rende il codice più organizzato e manutenibile.

In questo capitolo si approfondiscono:

• Object-Oriented Programming: filosofia e vantaggi dell’approccio OOP
• Classi e istanze: definire classi e creare oggetti con new
• Costruttori: inizializzare oggetti con valori personalizzati
• Campi e metodi: proprietà e funzioni nelle classi
• Metodi statici: metodi accessibili sulla classe stessa, non sulle istanze
• Ereditarietà: estendere classi per condividere codice comune
• Campi privati: proprietà accessibili solo dall’interno della classe
• Object descriptors: configurare proprietà (writable, configurable, enumerable)

Cos’è Object-Oriented Programming

L’Object-Oriented Programming (OOP) è un paradigma di programmazione che organizza il codice attorno a oggetti che rappresentano entità del mondo reale o concetti del dominio applicativo.

Filosofia OOP

L’idea centrale è che tutto il codice e i dati correlati siano raggruppati in oggetti che rappresentano entità specifiche. Ogni oggetto contiene:

• Dati (proprietà): informazioni relative all’entità
• Comportamento (metodi): logica che opera su quei dati

Esempio pratico

In un’applicazione di e-commerce, si potrebbero avere:

• ProductList: oggetto che gestisce la lista di prodotti (dati: array di prodotti, metodi: render(), fetchProducts())
• Product: oggetto che rappresenta un singolo prodotto (dati: titolo, prezzo, immagine; metodi: render(), addToCart())
• ShoppingCart: oggetto che gestisce il carrello (dati: array di prodotti, totale; metodi: render(), addProduct(), calculateTotal())

Ogni oggetto è responsabile della propria logica e dei propri dati, rendendo il codice più organizzato e facile da comprendere.

Vantaggi dell’OOP

• Organizzazione: logica correlata è raggruppata insieme
• Riutilizzo: classi possono essere riutilizzate per creare più istanze
• Manutenibilità: modifiche a una classe si riflettono su tutte le istanze
• Chiarezza: è più facile capire cosa fa un oggetto guardando la sua classe

Classi e istanze

Cos’è una classe

Una classe è un blueprint (progetto) che definisce la struttura e il comportamento degli oggetti che verranno creati da essa. Non è un oggetto in sé, ma una definizione di come gli oggetti dovrebbero essere.

Cos’è un’istanza

Un’istanza è un oggetto concreto creato da una classe. Ogni istanza ha la stessa struttura definita nella classe, ma può contenere dati diversi.

Definire una classe

1
class Product {
2
  title = 'Default';
3
  imageUrl = '';
4
  description = '';
5
  price = 0;
6
}

La sintassi usa la parola chiave class, seguita dal nome della classe (convenzione: PascalCase, prima lettera maiuscola). Le proprietà definite nella classe sono chiamate campi (fields) e diventano proprietà quando si crea un’istanza.

Differenze rispetto agli object literals:

• Si usa = invece di : per assegnare valori
• Si termina con ; invece di ,
• Non si crea un oggetto immediatamente, solo una definizione

Creare un’istanza

Per creare un oggetto da una classe, si usa l’operatore new seguito dal nome della classe:

1
const product = new Product();
2
console.log(product); // { title: 'Default', imageUrl: '', description: '', price: 0 }

Importante: new è obbligatorio. Chiamare Product() senza new genera un errore.

Quando usare classi vs object literals

Usa classi quando:

• Devi creare molte istanze simili con la stessa struttura
• Vuoi garantire che tutti gli oggetti abbiano le stesse proprietà
• Hai logica riutilizzabile da associare agli oggetti

Usa object literals quando:

• Crei un oggetto una sola volta o in un punto specifico
• Non hai bisogno di riutilizzare la struttura
• Vuoi semplicemente raggruppare dati correlati

Costruttori

Il metodo constructor

Il metodo constructor è un metodo speciale che viene chiamato automaticamente quando si crea un’istanza con new. Permette di inizializzare l’oggetto con valori personalizzati.

1
class Product {
2
  constructor(title, imageUrl, description, price) {
3
    this.title = title;
4
    this.imageUrl = imageUrl;
5
    this.description = description;
6
    this.price = price;
7
  }
8
}

this si riferisce all’istanza che sta per essere creata. Assegnando valori a this.title, si crea una proprietà title sull’oggetto.

Creare istanze con valori iniziali

1
const pillow = new Product('A Pillow', 'https://...', 'A soft pillow', 19.99);
2
const carpet = new Product('A Carpet', 'https://...', 'A carpet', 89.99);

Ogni istanza ha dati diversi ma la stessa struttura, garantita dalla classe.

Campi vs proprietà nel constructor

I campi definiti nella classe (es. title = 'Default') vengono creati automaticamente come proprietà. Se si assegna un valore nel constructor con this.title = title, si sovrascrive il valore del campo.

Se si inizializzano sempre le proprietà nel constructor, i campi con valori di default possono essere omessi:

1
class Product {
2
  // Non serve definire i campi se li inizializziamo nel constructor
3
  constructor(title, imageUrl, description, price) {
4
    this.title = title;
5
    this.imageUrl = imageUrl;
6
    this.description = description;
7
    this.price = price;
8
  }
9
}

I campi sono utili quando si vogliono valori di default che non vengono sempre sovrascritti nel constructor.

Metodi nelle classi

Definire metodi

I metodi sono funzioni definite nella classe che diventano proprietà delle istanze:

1
class ProductItem {
2
  constructor(product) {
3
    this.product = product;
4
  }
5

6
  render() {
7
    const prodEl = document.createElement('li');
8
    prodEl.className = 'product-item';
9
    prodEl.innerHTML = `
10
      <div>
11
        <img src="${this.product.imageUrl}" alt="${this.product.title}">
12
        <div class="product-item__content">
13
          <h2>${this.product.title}</h2>
14
          <h3>$${this.product.price}</h3>
15
          <p>${this.product.description}</p>
16
          <button>Add to Cart</button>
17
        </div>
18
      </div>
19
    `;
20
    return prodEl;
21
  }
22

23
  addToCart() {
24
    console.log('Adding product to cart');
25
    console.log(this.product);
26
  }
27
}

Si usa la method shorthand notation (senza function). this si riferisce all’istanza su cui viene chiamato il metodo.

Chiamare metodi

1
const productItem = new ProductItem(pillow);
2
const element = productItem.render(); // chiama il metodo sull'istanza
3
productItem.addToCart();              // chiama un altro metodo

Problema con this negli event listener

Quando si passa un metodo come callback a un event listener, this non si riferisce più all’istanza:

1
const button = prodEl.querySelector('button');
2
button.addEventListener('click', productItem.addToCart);
3
// this dentro addToCart sarà il button, non productItem

Soluzioni:

1. Usare bind:

1
button.addEventListener('click', productItem.addToCart.bind(productItem));

2. Usare arrow function:

1
button.addEventListener('click', () => productItem.addToCart());

3. Definire il metodo come campo con arrow function:

1
class ProductItem {
2
  addToCart = () => {
3
    // this si riferisce sempre all'istanza
4
    console.log(this.product);
5
  };
6
}

Metodi statici

Cosa sono i metodi statici

I metodi statici sono metodi accessibili sulla classe stessa, non sulle istanze. Si definiscono con la parola chiave static.

1
class App {
2
  static init() {
3
    // logica di inizializzazione
4
    const shop = new Shop();
5
    App.cart = shop.cart; // proprietà statica
6
  }
7

8
  static addProductToCart(product) {
9
    App.cart.addProduct(product);
10
  }
11
}

Chiamare metodi statici

1
App.init();                    // chiamata sulla classe, non su un'istanza
2
App.addProductToCart(product); // stesso modo

Non si può chiamare new App().init() perché init non esiste sulle istanze.

Quando usare metodi statici

I metodi statici sono utili per:

• Funzioni helper che non necessitano di un’istanza
• Comunicazione tra classi: condividere dati o funzionalità senza creare istanze
• Configurazione globale: inizializzare l’applicazione

Esempio: una classe App con metodi statici può fungere da “colla” tra diverse parti dell’applicazione senza dover passare riferimenti tra oggetti.

Ereditarietà

Cos’è l’ereditarietà

L’ereditarietà permette a una classe di ereditare proprietà e metodi da un’altra classe (classe base o superclasse). La classe che eredita è chiamata sottoclasse o classe derivata.

Sintassi: extends

1
class Component {
2
  constructor(renderHookId) {
3
    this.hookId = renderHookId;
4
  }
5

6
  createRootElement(tag, cssClasses, attributes) {
7
    const rootElement = document.createElement(tag);
8
    if (cssClasses) {
9
      rootElement.className = cssClasses;
10
    }
11
    if (attributes && attributes.length > 0) {
12
      for (const attr of attributes) {
13
        rootElement.setAttribute(attr.name, attr.value);
14
      }
15
    }
16
    const hook = document.getElementById(this.hookId);
17
    hook.append(rootElement);
18
    return rootElement;
19
  }
20
}
21

22
class ShoppingCart extends Component {
23
  constructor(renderHookId) {
24
    super(renderHookId); // chiama il constructor della classe base
25
    this.items = [];
26
  }
27

28
  render() {
29
    const cartEl = this.createRootElement('section', 'cart');
30
    // logica specifica del carrello
31
    return cartEl;
32
  }
33
}

La parola chiave extends indica che ShoppingCart eredita da Component. La sottoclasse ha accesso a tutti i metodi della classe base tramite this.

super

La parola chiave super permette di:

1. Chiamare il constructor della classe base:

1
constructor(renderHookId) {
2
  super(renderHookId); // DEVE essere chiamato prima di usare this
3
  this.items = [];      // solo dopo super
4
}

Regola importante: super() deve essere chiamato prima di usare this nel constructor della sottoclasse.

2. Chiamare metodi della classe base:

1
class Child extends Parent {
2
  myMethod() {
3
    super.parentMethod(); // chiama il metodo della classe base
4
  }
5
}

Override di metodi

Una sottoclasse può sovrascrivere (override) un metodo della classe base definendo un metodo con lo stesso nome:

1
class Component {
2
  render() {
3
    // implementazione base
4
  }
5
}
6

7
class ShoppingCart extends Component {
8
  render() {
9
    // implementazione specifica per ShoppingCart
10
    // questa sostituisce completamente il render della classe base
11
  }
12
}

Quando si chiama cart.render(), viene eseguita l’implementazione di ShoppingCart, non quella di Component.

Vantaggi dell’ereditarietà

• Riduzione duplicazione: codice comune in una classe base
• Consistenza: tutte le sottoclassi hanno la stessa interfaccia base
• Manutenibilità: modifiche alla classe base si riflettono su tutte le sottoclassi

Limitazioni

• In JavaScript si può ereditare da una sola classe (no multiple inheritance)
• L’ereditarietà può creare dipendenze strette tra classi

Campi privati

Cos’è un campo privato

I campi privati sono proprietà accessibili solo dall’interno della classe che li definisce. Non possono essere letti o modificati dall’esterno.

Sintassi

Si definiscono usando il simbolo # prima del nome:

1
class ProductList {
2
  #products = []; // campo privato
3

4
  constructor() {
5
    // #products è accessibile qui
6
    this.#products = [];
7
  }
8

9
  fetchProducts() {
10
    // #products è accessibile qui
11
    this.#products = [/* ... */];
12
  }
13

14
  renderProducts() {
15
    // #products è accessibile qui
16
    for (const product of this.#products) {
17
      // ...
18
    }
19
  }
20
}

Accesso ai campi privati

1
const list = new ProductList();
2
console.log(list.#products); // Errore: private field must be declared in an enclosing class

I campi privati sono accessibili solo nella classe che li definisce, non nelle sottoclassi o dall’esterno.

Quando usare campi privati

Usa campi privati quando:

• Una proprietà è usata solo internamente alla classe
• Vuoi prevenire modifiche accidentali dall’esterno
• Vuoi nascondere dettagli di implementazione

Esempio: products in ProductList dovrebbe essere modificato solo tramite fetchProducts(), non direttamente dall’esterno.

Pseudo-private properties (convenzione)

Prima dell’introduzione dei campi privati, si usava la convenzione di prefixare con _:

1
class ProductList {
2
  _products = []; // convenzione: "privato", ma tecnicamente accessibile
3
}

Questa è solo una convenzione, non previene realmente l’accesso. I campi privati con # sono una protezione reale a livello di linguaggio.

Getters e setters nelle classi

Getters

I getters permettono di accedere a valori calcolati come se fossero proprietà:

1
class ShoppingCart {
2
  constructor() {
3
    this.items = [];
4
  }
5

6
  get totalAmount() {
7
    return this.items.reduce((sum, item) => sum + item.price, 0);
8
  }
9
}
10

11
const cart = new ShoppingCart();
12
console.log(cart.totalAmount); // chiama il getter automaticamente

Setters

I setters permettono di impostare valori con logica personalizzata:

1
class ShoppingCart {
2
  constructor() {
3
    this.items = [];
4
    this._totalOutput = null;
5
  }
6

7
  set cartItems(items) {
8
    this.items = items;
9
    // aggiorna l'UI quando cambiano gli items
10
    if (this._totalOutput) {
11
      this._totalOutput.innerHTML = `Total: $${this.totalAmount.toFixed(2)}`;
12
    }
13
  }
14

15
  addProduct(product) {
16
    const updatedItems = [...this.items, product];
17
    this.cartItems = updatedItems; // usa il setter
18
  }
19
}

Quando si assegna cart.cartItems = newItems, viene chiamato il setter, che può eseguire logica aggiuntiva (come aggiornare l’UI).

Object descriptors

Ogni proprietà di un oggetto ha un descriptor che contiene metadati che influenzano come la proprietà può essere usata.

Visualizzare descriptors

1
const person = {
2
  name: 'Vito',
3
  greet() {
4
    console.log(this.name);
5
  }
6
};
7

8
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
9
console.log(descriptor);
10
// { value: 'Vito', writable: true, enumerable: true, configurable: true }

Proprietà del descriptor

• value: il valore della proprietà
• writable: se la proprietà può essere modificata (true/false)
• enumerable: se la proprietà appare in for...in e Object.keys() (true/false)
• configurable: se la proprietà può essere eliminata o riconfigurata (true/false)

Modificare descriptors

Object.defineProperty() permette di modificare o creare proprietà con configurazione personalizzata:

1
const person = {
2
  name: 'Vito'
3
};
4

5
Object.defineProperty(person, 'name', {
6
  writable: false,    // non modificabile
7
  configurable: false, // non eliminabile
8
  enumerable: true,
9
  value: 'Vito'
10
});
11

12
person.name = 'Vito'; // non ha effetto (writable: false)
13
delete person.name;         // non ha effetto (configurable: false)

Esempi d’uso

Rendere una proprietà non modificabile:

1
Object.defineProperty(person, 'name', {
2
  writable: false,
3
  configurable: true,
4
  enumerable: true,
5
  value: person.name // mantiene il valore corrente
6
});

Escludere metodi da for...in:

1
Object.defineProperty(person, 'greet', {
2
  value: person.greet,
3
  writable: true,
4
  configurable: true,
5
  enumerable: false // non appare in for...in
6
});
7

8
for (const key in person) {
9
  console.log(key); // solo 'name', non 'greet'
10
}

Questo è utile quando si vuole iterare solo sulle proprietà dati, escludendo i metodi.

instanceof

L’operatore instanceof verifica se un oggetto è un’istanza di una classe specifica:

1
class Person {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
}
6

7
const p = new Person('Vito');
8
console.log(p instanceof Person);  // true
9
console.log(p instanceof Object);  // true (tutte le classi ereditano da Object)
10
console.log(p instanceof Array);  // false

Con elementi DOM

Gli elementi DOM sono istanze di classi built-in:

1
const button = document.querySelector('button');
2
console.log(button instanceof HTMLButtonElement); // true
3
console.log(button instanceof HTMLElement);        // true (classe base)
4
console.log(button instanceof Element);           // true (classe base più alta)

Riepilogo

• Object-Oriented Programming: paradigma che organizza il codice attorno a oggetti che rappresentano entità del dominio
• Classi: blueprint per creare oggetti con struttura e comportamento comuni; si definiscono con class NomeClasse {}
• Istanze: oggetti concreti creati con new NomeClasse(); hanno la stessa struttura ma dati diversi
• Costruttori: metodo constructor() chiamato automaticamente alla creazione; inizializza l’oggetto con this
• Metodi: funzioni definite nella classe che diventano proprietà delle istanze; this si riferisce all’istanza
• Metodi statici: definiti con static; accessibili sulla classe stessa, non sulle istanze; utili per helper e comunicazione tra classi
• Ereditarietà: extends permette a una classe di ereditare da un’altra; super() chiama il constructor della classe base; override di metodi possibile
• Campi privati: definiti con #nomeCampo; accessibili solo dall’interno della classe; protezione reale a livello di linguaggio
• Getters e setters: get e set per proprietà calcolate o con logica personalizzata
• Object descriptors: writable, configurable, enumerable controllano come le proprietà possono essere usate; modificabili con Object.defineProperty()
• instanceof: operatore per verificare se un oggetto è istanza di una classe