Prototipi e ereditarietà in javascript

L'eredità è un concetto della programmazione orientata agli oggetti, anche se JavaScript supporta pienamente l'eredità tra genitori e bambini, il lavoro è lontano dalla tradizionale programmazione orientata agli oggetti, cioè perché tutto in JavaScript è mappato sul costruttore primitivo Oggetto (Oggetto con una capitale O) ecco perché è anche noto come oggetto principale. Non interpretare erroneamente questo oggetto principale con l'oggetto del tipo di dati.

JavaScript è spesso interpretato erroneamente come un Olinguaggio orientato al bject ma in realtà non è vero; JavaScript è un linguaggio basato sul prototipo. L'eredità in JavaScript è raggiunta da qualcosa chiamato Eredità prototipica. Per capirlo, dobbiamo prima avere familiarità con il modo in cui un costruttore funziona in JavaScript, come un oggetto viene creato contro un costruttore e ciò che è il prototipo concatenante.

Questo è uno degli argomenti avanzati di JavaScript e ti prenderemo molto lentamente e cercheremo di spiegare ogni piccola informazione insieme a frammenti, iniziamo.

Come funziona un costruttore in javascript

Convenzionalmente, costruttori sono funzioni speciali che vengono eseguite ogni volta che un oggetto viene creato contro una classe; In JavaScript, ogni espressione di funzione è un costruttore. Ora, se provi da un linguaggio di programmazione banale e hai qualche background con programmazione orientata agli oggetti, allora ti confonderai. Pertanto, cerca di non confrontare i concetti JavaScript con una banale programmazione orientata agli oggetti.

Anche se con l'arrivo della versione ES 6 di JavaScript la parola chiave "Classe"È stato aggiunto a JavaScript, ma questo non è usato per implementare il concetto di eredità. In JavaScript, è possibile creare oggetti mappati sulla funzione, SÌ - funzioni.

Immagina una funzione creata con il seguente codice:

var persona = function ()

Come accennato in precedenza, che ogni espressione della funzione è un costruttore, questo può essere dimostrato usando le seguenti righe all'interno della funzione:

var persona = function (name)
Questo.nome = nome;
Questo.età = 20

Ora, come puoi vedere, stiamo creando una funzione e all'interno del corpo della funzione, stiamo definendo e inizializzando le proprietà dell'oggetto, proprio come facciamo in qualsiasi normale costruttore convenzionale. Ora, creiamo alcuni oggetti mappati su questo Persona funzione costruttore con le seguenti righe di codice:

var p1 = new persona ("John");
var p2 = new persona ("Albert");

Ora stiamo creando oggetti, ma non abbiamo un metodo all'interno degli oggetti che ci restituiranno il nome della persona che abbiamo appena creato, quindi creiamo quella funzione all'interno del costruttore del Persona oggetto.

var persona = function (name)
Questo.nome = nome;
Questo.età = 20;
Questo.getName = function ()
ritorno (questo.nome)

Ora, dobbiamo chiamare questa funzione da ogni singolo oggetto usando le seguenti righe di codice:

console.registro (P1.getName ());
console.registro (P2.getName ());

Dopo aver eseguito l'intero frammento, otteniamo il seguente output sulla console:

Ora ecco il problema principale con l'utilizzo di questo tipo di modello, immagina di avere 100 oggetti di Persona, Questi 100 oggetti avranno i loro Proprio 100 diversi getname() Funzioni:

Questo perché questi oggetti sono le istanze del Persona, rendendolo così ridondante sulla memoria. Questo è dove il Proprietà prototipo entra in gioco.

La proprietà prototipo

Ogni funzione e ogni oggetto hanno una proprietà denominata Prototipo, Questo prototipo contiene metodi e proprietà di una funzione e questa proprietà prototipo è condivisa tra tutte le istanze/oggetti che sono mappati alla funzione, dai un'occhiata a questo frammento:

Se dovessimo creare alcuni oggetti in base a questa funzione "X", Erediterebbero i metodi e le proprietà all'interno del"prototipo"Della funzione. Nel nostro esempio, la funzione principale sarebbe la Persona E gli oggetti sono P1, P2, Piace:

Utilizzo della proprietà prototipo per creare eredità prototipica

Il nostro problema principale con l'approccio banale era che ogni oggetto aveva il proprio getname() funzioni, più gli oggetti più è il numero di getname() funzioni nella memoria. Per rimuovere questo, scriviamo il funzione getName () Al di fuori dell'espressione del costruttore e all'interno della proprietà prototipo usando la sintassi:

ObjectName.prototipo.MethodName

Il nostro codice cambia in:

var persona = function (name)
Questo.nome = nome;
Questo.età = 20;

persona.prototipo.getName = function ()
Restituisci questo.nome;

var p1 = new persona ("John");
var p2 = new persona ("Albert");
console.registro (P1.getName ());
console.registro (P2.getName ());

L'output è esattamente lo stesso dell'ultima volta:

Ma la differenza questa volta è che, piuttosto che ogni oggetto che ha il proprio getnamefunzione (), ogni oggetto accede al getname() funzione nel suo genitore e usando quella funzione per eseguire l'istruzione fornita. Questo è chiamato "Eredità prototipica"In JavaScript. Alla fine, non renderlo ridondante nella memoria.

Oggetto principale

Tutto in JavaScript è essenzialmente un oggetto, ciò significa che tutto in JavaScript si basa su Oggetto (con una capitale O).

Per spiegare questo, utilizzare le seguenti righe di codice e aprire la console del browser.

var demo = function ()

console.dir (demo);

Stai creando una funzione con un costruttore vuoto e il console.Dir() Visualizza i dettagli di Demo () Definizione della funzione sulla console, vedrai questo:

Espandere la punta di freccia ed esaminare il __proto__ proprietà di questa funzione, il __proto__ La proprietà ci dice su quale oggetto era questa funzione mappata, vedrai questo:

Ora, creiamo un'istanza di questa funzione demo ed esaminiamo la sua __proto__ Piace:

var demo = function ()

let x = new demo ();
console.dir (x);

Dopo aver eseguito questo codice, dovresti vedere il seguente output sulla console:

Espandi questo ed esamina il costruttore su cui è stata mappata l'istanza "X", vedrai:

Significa quell'oggetto X ha la demo dei genitori e sappiamo già che il DEMO FUNZIONEè mappato sull'oggetto JavaScript. Questo crea una catena di prototipazione come:

L'oggetto "X"Può accedere ai metodi e alle proprietà dell'oggetto principale, creando così una catena di eredità.

Se guardiamo nella nostra console per l'ultima volta, possiamo esaminare che l'oggetto principale ha questo metodo nella sua proprietà prototipo che è accordare() COME:

E chiamiamo questa proprietà sull'oggetto "X"E sulla funzione Demo che hai creato come:

console.registro (x.accordare());
console.registro (demo.accordare());

Ottieni l'output come:

Puoi vedere, sia l'oggetto che la funzione sono stati in grado di accedere a questo metodo anche se non è stato definito al loro interno.

Ecco come funziona l'eredità in JavaScript attraverso i prototipi.

Conclusione

L'eredità in JavaScript è molto diversa dalla nostra definizione convenzionale di eredità nella programmazione orientata agli oggetti. In JavaScript, otteniamo l'eredità utilizzando una proprietà chiamata prototipo. Hai imparato come funziona un costruttore in JavaScript, qual è il prototipo Proprietà, come tutto all'interno di Javascript è un oggetto imparando Oggetto principale. Inoltre, hai appreso l'eredità prototipica e il concatenamento dei prototipi e sei stato in grado di accedere ai metodi e alle proprietà del Oggetto principale usando il oggetto che hai creato.