Comprensione dei costruttori in JavaScript

JavaScript è un linguaggio consolidato ma ha solo aggiunto il supporto per la classica programmazione orientata agli oggetti (OOP) in ES6. Fino a quando non ha aggiunto funzionalità come le dichiarazioni di classe, JavaScript ha gestito OOP utilizzando un paradigma basato su prototipi meno noto. Con entrambi gli approcci, tuttavia, è possibile creare applicazioni complesse che utilizzano funzionalità basate su oggetti.

Un costruttore in JavaScript prototipo assomiglia molto a qualsiasi altra funzione. La differenza principale è che puoi usare quella funzione di costruzione per creare oggetti.

Che cos'è un costruttore in JavaScript?

I costruttori sono uno dei i concetti fondamentali della programmazione orientata agli oggetti. Un costruttore è una funzione che puoi usare per creare un'istanza di un oggetto. Oltre a creare un nuovo oggetto, un costruttore specifica le proprietà e i comportamenti che gli apparterranno.

Sintassi del costruttore

funzioneNome del costruttore() {
 this.property1 = "Proprietà1";
 this.property2 = "Proprietà2";
 this.property3 = "Proprietà3";
}

È possibile creare un costruttore con il funzione parola chiave poiché è essenzialmente come qualsiasi altra funzione. Tuttavia, i costruttori aderiscono alle seguenti convenzioni:

1. Per distinguerle da altre funzioni, utilizzare un nome per il costruttore che inizi con una lettera maiuscola.
2. I costruttori usano il Questo parola chiave in modo diverso. Dentro un costruttore, Questo si riferisce al nuovo oggetto che il costruttore creerà.
3. A differenza delle funzioni JavaScript, i costruttori definiscono proprietà e comportamenti invece di restituire valori.

Utilizzo di un costruttore per creare nuovi oggetti

In JavaScript, utilizzare un costruttore per creare un oggetto è un compito facile. Ecco un semplice costruttore seguito da un'invocazione:

funzioneAlunno() {
 this.name = "Gloria";
 this.gender = "Femmina";
Questo.età = 19;
}
permettere studentessa = nuovo Alunno();

In questo esempio, studentessa è un oggetto creato dal Alunno costruttore. Usa il nuovo parola chiave per chiamare la funzione come costruttore. Questa parola chiave indica a JavaScript di creare una nuova istanza di Alunno. Non dovresti chiamare questa funzione senza il nuovo parola chiave perché il Questo all'interno del costruttore non punterà a un nuovo oggetto. Dopo la costruzione, studentessa ha tutte le proprietà di Alunno. Puoi accedere e modificare queste proprietà proprio come faresti con qualsiasi altro oggetto.

Cose importanti da sapere sui costruttori JavaScript

Lavorare con i costruttori può essere così faticoso e, allo stesso tempo, può essere un compito facile. Ecco alcune cose importanti che ogni sviluppatore dovrebbe sapere sull'utilizzo dei costruttori.

Utilizzo di costruttori con argomenti

È possibile estendere un costruttore per ricevere argomenti. Questo è molto importante se stai cercando di scrivere codice reattivo e flessibile.

Ogni volta che crei un oggetto da un costruttore, l'oggetto erediterà tutte le proprietà dichiarate nel costruttore. Ad esempio, il studentessa che hai creato sopra avrà delle proprietà nome, genere, E età con valori iniziali fissi. Sebbene sia possibile modificare manualmente ciascuna proprietà, sarebbe molto faticoso scrivere un programma utilizzando molti oggetti.

Per fortuna, i costruttori JavaScript possono accettare parametri, come qualsiasi altra funzione. Puoi cambiare il Alunno costruttore di accettare due parametri:

funzioneAlunno(nome, genere) {
Questo.nome = nome;
Questo.gender = genere;
Questo.età = 19;
}

È ora possibile definire oggetti univoci dallo stesso costruttore passando argomenti diversi.

Gli argomenti rendono i costruttori più flessibili. Risparmiano tempo e incoraggiano il codice pulito.

Definizione di metodi oggetto

Un metodo è una proprietà dell'oggetto che è una funzione. I metodi migliorano il tuo codice in OOP in quanto aggiungono comportamenti diversi ai tuoi oggetti. Ecco un esempio:

funzioneAlunno(nome, genere) {
Questo.nome = nome;
Questo.gender = genere;
Questo.età = 19 ;
Questo.sayName = funzione () {
ritorno`Il mio nome è ${nome}`; 
 }
}

Quanto sopra aggiunge la funzione direNome al costruttore.

Supponiamo di utilizzare questo costruttore per creare un oggetto che memorizzi in una variabile, studentessa. È quindi possibile chiamare questa funzione con il codice seguente:

studentessa.sayName()

il prototipo

In precedenza, abbiamo creato Alunno in modo che tutte le sue istanze abbiano un età immobile del valore di 19. Ciò si tradurrà in avere una variabile duplicata per ciascuno Alunno istanza che crei.

Per evitare questa duplicazione, JavaScript utilizza il concetto di prototipi. Tutti gli oggetti creati da un costruttore condividono le proprietà del suo prototipo. Puoi aggiungere il età proprietà a Alunno prototipo come mostrato di seguito:

Studente.prototipo.età = 19;

In questo modo, tutte le istanze di Alunno avrà il età proprietà. Dichiarando proprietà del prototipo è un modo per ridurre il codice duplicato nella tua applicazione. Rende il tuo codice il più standard possibile.

Una proprietà prototipo può essere un oggetto

Puoi aggiungere le proprietà del prototipo individualmente come spiegato sopra. Ma se hai molte proprietà da aggiungere, questo può essere scomodo.

In alternativa, puoi contenere tutte le proprietà che desideri in un nuovo oggetto. In questo modo, imposterai tutte le proprietà contemporaneamente. Per esempio:

Studente.prototipo = {
 età: 19,
 gara: "Bianco",
 disabilità: "Nessuno"
}

Studente.prototipo = { 
costruttore: Alunno, 
 età: 19, 
 gara: "Bianco", 
 disabilità: "Nessuno"
}

Supertipi ed ereditarietà

Eredità è un metodo che i programmatori impiegano per ridurre gli errori nelle loro applicazioni. È un modo per attenersi al Non ripeterti (DRY) principio.

Supponiamo di avere due costruttori:Alunno E Insegnante—che hanno due proprietà prototipo simili.

Studente.prototipo = { 
costruttore: Alunno,
direNome: funzione () {
ritorno`Il mio nome è ${nome}`; 
 }
}
Insegnante.prototipo = { 
costruttore: Insegnante,
direNome: funzione () {
ritorno`Il mio nome è ${nome}`;
 }
}

Entrambi questi costruttori definiscono il direNome metodo, in modo identico. Per evitare questa inutile duplicazione, puoi creare un file supertipo.

funzioneDettagli individuali(){};
IndividualDetails.prototype = { 
costruttore: IndividualDettagli, 
direNome: funzione () {
ritorno`Il mio nome è ${nome}`; 
 }
};

Puoi quindi rimuovere direNome da entrambi i costruttori.

Per ereditare le proprietà dal supertipo, utilizzare Oggetto.create(). Si imposta il prototipo di entrambi i costruttori su un'istanza del supertipo. In questo caso, impostiamo il Alunno E Insegnante prototipi a un'istanza di IndividualDetails.

Eccolo:

Studente.prototipo = Oggetto.create (IndividualDetails.prototype);
Insegnante.prototipo = Oggetto.create (IndividualDetails.prototype);

Facendo questo, Alunno E Insegnante eredita tutte le proprietà del supertipo, Dettagli individuali.

Ecco come praticare DRY in OOP usando i supertipi.

I costruttori sono rivoluzionari

I costruttori sono un componente chiave di JavaScript e la padronanza delle loro funzionalità è fondamentale per lo sviluppo di applicazioni JavaScript OOP. È possibile utilizzare un costruttore per creare oggetti che condividono proprietà e metodi. È inoltre possibile utilizzare l'ereditarietà per definire le gerarchie di oggetti.

In ES6, puoi usare il file classe parola chiave per definire le classiche classi orientate agli oggetti. Questa versione di JavaScript supporta anche a costruttore parola chiave.