𝗙𝗮𝗰𝘁𝗼𝗿𝘆 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗼𝗿 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
Creare oggetti uno alla volta è un errore.
Se scrivi un oggetto manualmente per ogni utente o compagno di classe, ripeti il codice. Se hai 100 utenti, scriverai la stessa logica 100 volte. Questo porta a bug. Potresti accidentalmente modificare una proprietà in seguito e rompere la tua applicazione.
Usa invece questi due pattern per scrivere codice pulito.
- Factory Functions
Pensa a una vera fabbrica. Entrano le materie prime. Esce un prodotto finito.
Una factory function riceve dei parametri e restituisce un nuovo oggetto.
Esempio:
function classFactory(name) {
return {
reply() {
return `${name} is present`
}
}
}
I vantaggi:
- Scrivi la logica una sola volta.
- Riutilizzi la funzione per ogni nuovo oggetto.
- I dati rimangono al sicuro. Il nome rimane all'interno dello scope della funzione. Non puoi sovrascriverlo accidentalmente dall'esterno.
- Funzioni Costruttore
Anche le funzioni costruttore creano oggetti. Utilizzano la parola chiave "new" e la parola chiave "this". Per convenzione, queste iniziano con la lettera maiuscola.
Esempio:
function Classmate(name) {
this.name = name
this.reply = function() {
return `${this.name} is present`
}
}
Quando usi "new", JavaScript fa il lavoro per te:
- Crea un nuovo oggetto.
- Lo assegna a "this".
- Restituisce l'oggetto automaticamente.
Non hai bisogno di un'istruzione "return".
Scalare il codice
Puoi combinare questi pattern con gli array per gestire grandi quantità di dati. Invece di digitare ogni singolo nome, usa una funzione map.
Esempio:
const names = ['Kali', 'Andrew', 'Pearl', 'Percy']
const classmates = names.map(name => new Classmate(name))
Ora hai una lista di oggetti pronta all'uso.
Riassunto:
- Evita la creazione manuale di oggetti per prevenire ripetizioni.
- Usa le Factory Functions per incapsulare la logica e proteggere i dati.
- Usa le Funzioni Costruttore per sfruttare la parola chiave "new" per la creazione automatica di oggetti.
- Scrivi sempre la logica una sola volta e riutilizzala ovunque.
Fonte: https://dev.to/pearlodi/factory-functions-and-constructor-functions-in-javascript-lmb