Prototipi e Constructor Functions

Introduzione

Le classi in JavaScript sono una feature relativamente recente (ES6). Prima della loro introduzione, JavaScript utilizzava constructor functions e prototypes per creare oggetti basati su blueprint e implementare l’ereditarietà.

Comprendere questi concetti è fondamentale perché:

• Le classi sono syntactic sugar per constructor functions e prototypes
• JavaScript è un linguaggio prototype-based alla base
• Questi concetti sono spesso oggetto di domande nei colloqui tecnici
• Aiutano a capire il comportamento di oggetti e metodi

In questo capitolo si approfondiscono:

• Constructor functions: come creare blueprint senza classi
• Prototypes: oggetti fallback per condividere codice
• Prototype chain: catena di oggetti prototipo
• Metodi su prototype vs istanza: differenze di performance e memoria
• Object.create e setPrototypeOf: creare oggetti con prototype personalizzati
• Differenze tra classi e constructor functions: quando e perché usare quale approccio

Constructor functions

Cos’è una constructor function

Una constructor function è una funzione speciale che agisce come blueprint per creare oggetti. Viene chiamata con l’operatore new, che fa comportare la funzione in modo diverso rispetto a una chiamata normale.

Sintassi

1
function Person() {
2
  this.name = 'Vito';
3
  this.age = 30;
4
  this.greet = function() {
5
    console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);
6
  };
7
}
8

9
const p = new Person();
10
p.greet(); // "Hi, I am Max and I am 30 years old"

Convenzione: il nome della funzione inizia con una lettera maiuscola per indicare che deve essere chiamata con new. Questa è solo una convenzione, non ha impatto tecnico.

Cosa fa new

Quando si chiama una funzione con new, JavaScript:

1. Crea un oggetto vuoto
2. Imposta this a quell’oggetto
3. Esegue il corpo della funzione (che può aggiungere proprietà a this)
4. Restituisce this (l’oggetto creato)

Importante: senza new, la funzione si comporta normalmente e non restituisce un oggetto:

1
const p = Person(); // undefined (non restituisce nulla)
2
p.greet(); // Errore: cannot read property 'greet' of undefined

Classi come syntactic sugar

Le classi sono essenzialmente syntactic sugar per constructor functions:

1
// Con classe
2
class Person {
3
  constructor() {
4
    this.name = 'Vito';
5
    this.age = 30;
6
  }
7
  greet() {
8
    console.log(`Hi, I am ${this.name}`);
9
  }
10
}
11

12
// Equivalente con constructor function
13
function Person() {
14
  this.name = 'Vito';
15
  this.age = 30;
16
}
17
Person.prototype.greet = function() {
18
  console.log(`Hi, I am ${this.name}`);
19
};

Le classi rendono la sintassi più chiara e aggiungono alcune ottimizzazioni, ma dietro le quinte utilizzano gli stessi meccanismi.

Prototypes

Cos’è un prototype

Un prototype è un oggetto collegato a un altro oggetto che funge da fallback quando si cerca una proprietà o un metodo che non esiste sull’oggetto stesso.

JavaScript è un linguaggio prototype-based: ogni oggetto ha un prototype collegato che viene consultato automaticamente quando si accede a proprietà o metodi.

Come funziona

Quando si accede a una proprietà o metodo su un oggetto:

1. JavaScript cerca sull’oggetto stesso
2. Se non trova, cerca sul prototype dell’oggetto
3. Se non trova, cerca sul prototype del prototype
4. Continua fino alla fine della prototype chain
5. Se non trova nulla, restituisce undefined (proprietà) o genera un errore (metodo)

Esempio pratico

1
const p = new Person();
2
console.log(p.toString()); // funziona anche se toString non è definito in Person

toString funziona perché esiste nel prototype di p, che a sua volta ha un prototype che contiene toString.

__proto__ vs prototype

__proto__ (o [[Prototype]])

• Proprietà presente su ogni oggetto
• Punta al prototype collegato (fallback object)
• Non modificare direttamente (usare Object.setPrototypeOf())

1
const p = new Person();
2
console.log(p.__proto__); // mostra il prototype di p

prototype (solo su constructor functions)

• Proprietà presente solo su funzioni (che sono oggetti)
• Definisce quale prototype assegnare agli oggetti creati con quella funzione
• Si modifica per configurare il prototype degli oggetti futuri

1
function Person() {}
2
Person.prototype.greet = function() {
3
  console.log('Hello');
4
};
5

6
const p = new Person();
7
console.log(p.__proto__ === Person.prototype); // true

Relazione: p.__proto__ punta allo stesso oggetto di Person.prototype quando p è creato con new Person().

Prototype chain

Catena di prototypes

La prototype chain è la catena di oggetti prototype collegati tra loro. Quando JavaScript cerca una proprietà, percorre questa catena fino a trovarla o fino alla fine.

1
const p = new Person();
2
p.toString(); // cerca in: p → Person.prototype → Object.prototype → null

Struttura tipica

1. Oggetto istanza (p): proprietà specifiche dell’istanza
2. Prototype del constructor (Person.prototype): metodi condivisi tra tutte le istanze
3. Object.prototype: prototype base con metodi come toString(), valueOf()
4. null: fine della catena

Esempio visivo

1
function Person() {
2
  this.name = 'Vito';
3
}
4

5
Person.prototype.greet = function() {
6
  console.log('Hello');
7
};
8

9
const p = new Person();
10

11
// p ha: { name: 'Vito' }
12
// p.__proto__ ha: { greet: function, constructor: Person }
13
// p.__proto__.__proto__ ha: { toString: function, valueOf: function, ... }
14
// p.__proto__.__proto__.__proto__ è null

Oggetti built-in e prototypes

Ogni tipo built-in ha il proprio prototype con metodi specifici:

• Array.prototype: push(), pop(), map(), filter(), ecc.
• String.prototype: slice(), replace(), split(), ecc.
• Object.prototype: toString(), valueOf(), hasOwnProperty(), ecc.

Quando si crea un array con [], l’oggetto array ha Array.prototype come prototype, che contiene tutti i metodi degli array.

Metodi su prototype vs istanza

Metodi su prototype (preferibile)

Quando si definisce un metodo nella classe usando la method shorthand, JavaScript lo aggiunge al prototype, non all’istanza:

1
class Person {
2
  greet() {
3
    console.log('Hello');
4
  }
5
}
6

7
const p1 = new Person();
8
const p2 = new Person();
9
console.log(p1.__proto__.greet === p2.__proto__.greet); // true
10
// Stesso oggetto in memoria, condiviso tra tutte le istanze

Vantaggi:

• Memoria: il metodo esiste una sola volta, condiviso tra tutte le istanze
• Performance: non viene ricreato per ogni istanza
• Efficienza: ideale quando si creano molte istanze

Metodi come proprietà dell’istanza

Si può definire un metodo come proprietà usando un campo con arrow function:

1
class Person {
2
  greet = () => {
3
    console.log('Hello');
4
  };
5
}
6

7
const p1 = new Person();
8
const p2 = new Person();
9
console.log(p1.greet === p2.greet); // false
10
// Oggetti diversi, creati per ogni istanza

Quando usare:

• Quando si vuole garantire che this si riferisca sempre all’istanza (utile con event listener)
• Quando si creano poche istanze (l’impatto su memoria/performance è minimo)

Svantaggi:

• Memoria: il metodo viene ricreato per ogni istanza
• Performance: creazione più costosa quando si hanno molte istanze

Equivalente con constructor function

1
// Metodo su prototype (preferibile)
2
function Person() {
3
  this.name = 'Vito';
4
}
5
Person.prototype.greet = function() {
6
  console.log('Hello');
7
};
8

9
// Metodo come proprietà (meno efficiente)
10
function Person() {
11
  this.name = 'Vito';
12
  this.greet = function() {
13
    console.log('Hello');
14
  };
15
}

Ereditarietà con prototypes

Come funziona extends dietro le quinte

Quando si usa extends in una classe, JavaScript:

1. Crea un oggetto basato sulla classe base
2. Lo imposta come prototype della classe derivata
3. Configura la prototype chain correttamente

1
class AgedPerson {
2
  printAge() {
3
    console.log(this.age);
4
  }
5
}
6

7
class Person extends AgedPerson {
8
  constructor() {
9
    super();
10
    this.name = 'Vito';
11
    this.age = 30;
12
  }
13
  greet() {
14
    console.log('Hello');
15
  }
16
}

Equivalente con constructor functions:

1
function AgedPerson() {}
2
AgedPerson.prototype.printAge = function() {
3
  console.log(this.age);
4
};
5

6
function Person() {
7
  AgedPerson.call(this); // equivalente a super()
8
  this.name = 'Vito';
9
  this.age = 30;
10
}
11

12
// Imposta il prototype di Person a un oggetto basato su AgedPerson
13
Person.prototype = Object.create(AgedPerson.prototype);
14
Person.prototype.constructor = Person; // mantiene il riferimento corretto
15

16
Person.prototype.greet = function() {
17
  console.log('Hello');
18
};

super() e prototypes

Quando si chiama super() nel constructor di una sottoclasse:

1. Viene creato un oggetto basato sulla classe base
2. Quell’oggetto viene impostato come prototype della sottoclasse
3. Il constructor della classe base viene eseguito per inizializzare l’oggetto

Questo spiega perché super() deve essere chiamato prima di usare this nella sottoclasse: il prototype deve essere configurato prima che l’oggetto possa essere utilizzato.

Modificare prototypes

Aggiungere metodi al prototype

Invece di sostituire l’intero prototype, è meglio aggiungere metodi al prototype esistente:

1
function Person() {
2
  this.name = 'Vito';
3
}
4

5
// ❌ Sostituisce l'intero prototype (perde constructor)
6
Person.prototype = {
7
  printAge() {
8
    console.log(this.age);
9
  }
10
};
11

12
// ✅ Aggiunge al prototype esistente (mantiene constructor)
13
Person.prototype.printAge = function() {
14
  console.log(this.age);
15
};

Mantenere il constructor nel prototype è utile per creare nuove istanze quando non si ha accesso diretto alla constructor function:

1
const p2 = new p.__proto__.constructor(); // crea una nuova istanza di Person

Object.setPrototypeOf()

Permette di cambiare il prototype di un oggetto dopo la sua creazione:

1
const course = {
2
  title: 'JavaScript - The Complete Guide',
3
  rating: 5
4
};
5

6
const coursePrototype = {
7
  printRating() {
8
    console.log(`${this.rating}/5`);
9
  }
10
};
11

12
Object.setPrototypeOf(course, coursePrototype);
13
course.printRating(); // "5/5"

Uso: scenario avanzato quando si vuole modificare il prototype di un oggetto esistente. Generalmente è meglio configurare il prototype prima della creazione.

Mantenere il prototype originale

Se si vuole aggiungere funzionalità mantenendo il prototype esistente:

1
const newPrototype = {
2
  ...Object.getPrototypeOf(course),
3
  printRating() {
4
    console.log(`${this.rating}/5`);
5
  }
6
};
7

8
Object.setPrototypeOf(course, newPrototype);

Object.create()

Creare oggetti con prototype personalizzato

Object.create(prototype) crea un oggetto vuoto con un prototype specificato:

1
const studentPrototype = {
2
  printProgress() {
3
    console.log(this.progress);
4
  }
5
};
6

7
const student = Object.create(studentPrototype);
8
student.name = 'Vito';
9
student.progress = 0.8;
10
student.printProgress(); // "0.8"

Vantaggi:

• Si può specificare il prototype durante la creazione
• Non richiede una constructor function
• Utile per creare oggetti con prototype personalizzati senza classi

Con property descriptors

Object.create() accetta un secondo argomento per definire proprietà con descriptors:

1
const student = Object.create(studentPrototype, {
2
  name: {
3
    configurable: true,
4
    enumerable: true,
5
    value: 'Vito',
6
    writable: true
7
  },
8
  progress: {
9
    configurable: false,
10
    enumerable: true,
11
    value: 0.8,
12
    writable: false
13
  }
14
});

Quando usare Object.create()

• Quando si vuole creare un oggetto con un prototype specifico senza definire una classe
• Quando si lavora con oggetti che devono ereditare da oggetti esistenti
• In scenari avanzati dove si ha bisogno di controllo fine sul prototype

Differenze tra classi e constructor functions

Obbligatorietà di new

Classi: devono essere chiamate con new. Chiamare una classe senza new genera un errore.

1
class Person {}
2
const p = Person(); // TypeError: Class constructor Person cannot be invoked without 'new'

Constructor functions: tecnicamente possono essere chiamate senza new, ma non funzionano come previsto:

1
function Person() {
2
  this.name = 'Vito';
3
}
4
const p = Person(); // undefined (non restituisce un oggetto)

Enumerabilità dei metodi

Classi: i metodi definiti con method shorthand sono non-enumerabili per default:

1
class Person {
2
  greet() {}
3
}
4
const p = new Person();
5
for (const key in p) {
6
  console.log(key); // non stampa 'greet'
7
}

Constructor functions: i metodi aggiunti nel constructor sono enumerabili:

1
function Person() {
2
  this.greet = function() {};
3
}
4
const p = new Person();
5
for (const key in p) {
6
  console.log(key); // stampa 'greet'
7
}

Strict mode

Classi: usano strict mode automaticamente. Comportamenti come this = undefined in funzioni non legate sono attivi.

Constructor functions: non usano strict mode a meno che non sia attivato manualmente con 'use strict'.

Sintassi e leggibilità

Classi: sintassi più chiara e familiare per chi viene da altri linguaggi OOP.

Constructor functions: sintassi più verbosa, richiede comprensione dei prototypes.

Riepilogo

• Constructor functions: funzioni chiamate con new che creano oggetti; sono ciò che le classi utilizzano dietro le quinte
• Prototypes: oggetti fallback collegati ad altri oggetti; JavaScript cerca proprietà/metodi nel prototype se non li trova sull’oggetto stesso
• __proto__: proprietà su ogni oggetto che punta al prototype collegato; usare principalmente per debugging
• prototype: proprietà solo su constructor functions che definisce quale prototype assegnare agli oggetti creati
• Prototype chain: catena di prototypes collegati; JavaScript percorre la catena fino a trovare una proprietà o raggiungere null
• Metodi su prototype: preferibili per performance e memoria; condivisi tra tutte le istanze
• Metodi come proprietà: utili quando si vuole garantire il binding di this; meno efficienti ma accettabili per poche istanze
• Ereditarietà: extends configura la prototype chain; super() crea un oggetto basato sulla classe base e lo imposta come prototype
• Object.create(): crea oggetti con prototype personalizzato senza constructor function
• Object.setPrototypeOf(): cambia il prototype di un oggetto esistente (uso avanzato)
• Differenze classi vs constructor functions: classi obbligano new, metodi non-enumerabili, strict mode automatico; constructor functions sono più flessibili ma meno sicure