L'ereditarietà in JavaScript
Posted by vanni on Sunday, 1 April 2018
In questo video parleremo dell'ereditarietà, uno dei 3 paradigmi della programmazione orientata agli oggetti (assieme a polimorfismo e incapsulamento).
L'ereditarietà è la capacità che ha un oggetto (subclass o classe figlia) di ereditare metodi e proprietà da un altro oggetto (superclass o classe madre).
JavaScript è un linguaggio orientato agli oggetti basato sui prototipi, e anche prima dell'introduzione delle classi da parte dell'ECMAScript 6, era possibile applicare l'ereditarietà tra i suoi oggetti. L'unica seccatura era che la sintassi non era particolarmente "developer-friendly" e quindi bisognava avere un po' di pratica, inoltre, sviluppatori provenienti da altri linguaggi facevano fatica a familiarizzare con questa metodologia.
Introducendo le classi, l'ECMAScript 6 ha introdotto anche una sintassi simile ad altri linguaggi (es. Java), è quindi ora più semplice applicare l'ereditarietà.
In questo video vedremo come eseguire l'ereditarietà usando questa nuova sintassi, anche se come detto nel video precedente, nulla viene aggiunto alle funzionalità e potenzialità del vecchio metodo.
Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
delle dell'ereditarietà in javascript
l'ereditarietà è uno dei tre paradigmi
della programmazione ad oggetti gli
altri due paradigmi sono polimorfismo e
incapsulamento annuncio già che questo
video sarà un po' approfondito
quindi se state e vedendo questo video
corso per la prima volta potete anche
saltare questo video e magari
riprenderlo un po più avanti
faccio questo video per un discorso di
completezza o magari per il gente che
già è programmatore di un altro
linguaggio
quindi ha già un'idea di come funziona
l'eredità l'ereditarietà quindi può
seguirlo più facilmente
intanto vi faccio vedere come si fa
l'ereditarietà con la sintassi ecma
script 6 si può fare lo stesso con la
vecchia sintassi però per un discorso di
semplicità vi faccio vedere solo quello
con l'ecma script 6 allora si dichiara
una classe abbiamo visto come si fa nel
video precedente ad esempio la classe
veicolo parentesi graffe keyword
constructor
parentesi tonda e ci passo dentro due
parametri per esempio ruote a motore
parentesi graffe qui assegno le mie
proprietà allora un valore ruote a
motore
ok e adesso metto anche un
un metodo descrizione veicolo e ci metto
dentro anzi facciamo un
ritorno con il return ritorna questa
stringa allora questo è un veicolo e poi
facciamo un po di complessita facciamo
un operatore ternario this motore a
motore a pedali e poi mi vado a capo
e this ruote ecco qui
allora questo vediamo fare controllare
che ho messo dentro tutto
solo che questo non dovevo metterlo qua ma dovevo metterlo qua allora io ho creato questa
classe le classi di nome veicolo ha due
proprietà e le proprietà prendono i
valori dagli argomenti passati
e poi c'è il metodo che si chiama
descrizione veicolo che ritornano la
stringa la stringa ritornata è composta
questo è un veicolo e poi qui ho messo
un operatore ternario se vi ricordate
e in questo caso io vogliola proprietà di this.motore un valore
booleano se il valore booleano è vero mi
ritorna a motore se il valore booleano e
falso mi ritorna a pedali e da
questo numero di ruote che sarà passato
come argomento
quindi se adesso io vado a vedere
posso creare il mio il mio oggetto dalla
mia e della mia classe veicolo allora
facciamo cost veicolo uno lo chiamo
veicolo 1 keyword new veicolo e ci passo
dentro ruote facciamo quattro motore true
se adesso io vado a vedere un ad usare
il metodo descrizione veicolo non vedo
perché il metodo ritorna stringa quindi
devono metterlo dentro
eccolo qui questo è un veicolo a motore
ed ha quattro ruote perfetto nella mia
classe funziona benissimo come abbiamo
visto nel video precedente
cosa succede adesso adesso io voglio
andare a un commento questo a creare
un'altra classe che eredita
le proprietà della classe veicolo quindi
vado a creare una classe figlio che
eredita tutte le proprietà dalla classe
padre e poi andremo ad aggiungere anche
nuove proprietà
allora come si fa a fare questo si usa
sempre la keyword classe e la chiamo auto
extends quindi estende la classe
veicolo scritto giusto cioè
parentesi graffe keyword constructor
sempre quella constructor e dentro è
come argomenti
dobbiamo passarci i parametri del padre
quindi ruote e motori e poi ci possono
anche altri nuovi argomenti per esempio
marca e colore ok parentesi graffe poi
si deve usare la keyword super con la
keyword super si fa riferimento alla
classe padre quindi qui io vado a
passargli i parametri che servono al
papa diciamo eccolo qui e poi vado ad
aggiungere le nuove proprietà nella
classe figlio allora this.marca da marca
this.colore da colore ecco qui quindi
adesso io ho creato una classe figlio
che estende la classe padre veicolo ho il
mio constructor qui dove passo i
parametri che servono al padre più due
altri due parametri che servono alle
proprietà della classe figlio ci metto
anche un metodo e la chiamo descrizione
descrizione auto e qui faccio all'output
direttamente
io adesso voglio usare il metodo della
classe del genitore dentro al al metodo
della classe del figlio come faccio a
fare questo si usa sempre allora metto
dentro si usa sempre la keyword super la
con la keyword super ci si rivolge al
padre si invoca il metodo descrizione
veicolo ecco qui e poi si continua
come si vuole in particolare che abbiamo this.marca e this.colore il
colore
ecco qui quindi cosa sto facendo qui
allora io ho creato la classe padre che
può essere usata tranquillamente per
creare oggetti poi per non stare lì a
ripetere il codice che ho già scritto
nella classe padre possa estendere
eccola qui la classe padre in una classe
figlio in questo caso auto e dove vado a
usare quando si estende una classe padre
si deve usare la keyword super per
rivolgersi alla classe padre e posso
usare le proprietà della classe padre e
anche i metodi della classe padre
quindi adesso se io vado a creare un
nuovo oggetto dalla classe figlia ad
esempio io voglio creare un cost usiamo
sempre la polo keyword new auto
adesso io devo passarci dentro quattro
argomenti
quindi il primo è ruote netto quattro
ruote motore metto vero sì perché c'è il
motore poi ci metto volkswagen e poi ci
metto il colore blu
se adesso io vado a vedere la output
allora come vedete io posso andare a
vedere le proprietà della classe figlio
eccola qui volkswagen ma possono anche
andare a vedere le proprietà della
classe padre ad esempio ruote
la classe figlio eredita tutte le
proprietà e metodi della classe padre
quindi io tutti gli oggetti che derivano
dalla classe figlio automaticamente
hanno proprietà e metodi della classe
figlio e della classe padre quindi posso
anche fare polo descrizione
auto e mi trovo che questo è un veicolo
a motore ed ha quattro ruote questo è la
stringa ritornata dal metodo del classe
padre e in più
trovo anche l'altra un'altra parte della
stringa che fa parte del metodo della
classe figlio
eccolo qui semplici e possono anche
andare a vedere usando il mio
oggetto creato posso andare a invocare
il metodo della classe padre descrizione
veicolo ecco questo è un piccolo motore
da quattro ruote con questo è tutto
questa è l'ereditarieta' in javascript vi
ripeto ancora questa è la la sintassi
dell'ecma script 6 si può fare la stessa
cosa con la vecchia sintassi è un po più
articolato quindi io per semplicità vi
ho fatto vedere questo e solo questo
appunto perché restiamo questo è un
corso base quindi non voglio
fare troppa confusione andare troppo in
profondità con questo è tutto ci
sentiamo la prossima ciao
delle dell'ereditarietà in javascript
l'ereditarietà è uno dei tre paradigmi
della programmazione ad oggetti gli
altri due paradigmi sono polimorfismo e
incapsulamento annuncio già che questo
video sarà un po' approfondito
quindi se state e vedendo questo video
corso per la prima volta potete anche
saltare questo video e magari
riprenderlo un po più avanti
faccio questo video per un discorso di
completezza o magari per il gente che
già è programmatore di un altro
linguaggio
quindi ha già un'idea di come funziona
l'eredità l'ereditarietà quindi può
seguirlo più facilmente
intanto vi faccio vedere come si fa
l'ereditarietà con la sintassi ecma
script 6 si può fare lo stesso con la
vecchia sintassi però per un discorso di
semplicità vi faccio vedere solo quello
con l'ecma script 6 allora si dichiara
una classe abbiamo visto come si fa nel
video precedente ad esempio la classe
veicolo parentesi graffe keyword
constructor
parentesi tonda e ci passo dentro due
parametri per esempio ruote a motore
parentesi graffe qui assegno le mie
proprietà allora un valore ruote a
motore
ok e adesso metto anche un
un metodo descrizione veicolo e ci metto
dentro anzi facciamo un
ritorno con il return ritorna questa
stringa allora questo è un veicolo e poi
facciamo un po di complessita facciamo
un operatore ternario this motore a
motore a pedali e poi mi vado a capo
e this ruote ecco qui
allora questo vediamo fare controllare
che ho messo dentro tutto
solo che questo non dovevo metterlo qua ma dovevo metterlo qua allora io ho creato questa
classe le classi di nome veicolo ha due
proprietà e le proprietà prendono i
valori dagli argomenti passati
e poi c'è il metodo che si chiama
descrizione veicolo che ritornano la
stringa la stringa ritornata è composta
questo è un veicolo e poi qui ho messo
un operatore ternario se vi ricordate
e in questo caso io vogliola proprietà di this.motore un valore
booleano se il valore booleano è vero mi
ritorna a motore se il valore booleano e
falso mi ritorna a pedali e da
questo numero di ruote che sarà passato
come argomento
quindi se adesso io vado a vedere
posso creare il mio il mio oggetto dalla
mia e della mia classe veicolo allora
facciamo cost veicolo uno lo chiamo
veicolo 1 keyword new veicolo e ci passo
dentro ruote facciamo quattro motore true
se adesso io vado a vedere un ad usare
il metodo descrizione veicolo non vedo
perché il metodo ritorna stringa quindi
devono metterlo dentro
eccolo qui questo è un veicolo a motore
ed ha quattro ruote perfetto nella mia
classe funziona benissimo come abbiamo
visto nel video precedente
cosa succede adesso adesso io voglio
andare a un commento questo a creare
un'altra classe che eredita
le proprietà della classe veicolo quindi
vado a creare una classe figlio che
eredita tutte le proprietà dalla classe
padre e poi andremo ad aggiungere anche
nuove proprietà
allora come si fa a fare questo si usa
sempre la keyword classe e la chiamo auto
extends quindi estende la classe
veicolo scritto giusto cioè
parentesi graffe keyword constructor
sempre quella constructor e dentro è
come argomenti
dobbiamo passarci i parametri del padre
quindi ruote e motori e poi ci possono
anche altri nuovi argomenti per esempio
marca e colore ok parentesi graffe poi
si deve usare la keyword super con la
keyword super si fa riferimento alla
classe padre quindi qui io vado a
passargli i parametri che servono al
papa diciamo eccolo qui e poi vado ad
aggiungere le nuove proprietà nella
classe figlio allora this.marca da marca
this.colore da colore ecco qui quindi
adesso io ho creato una classe figlio
che estende la classe padre veicolo ho il
mio constructor qui dove passo i
parametri che servono al padre più due
altri due parametri che servono alle
proprietà della classe figlio ci metto
anche un metodo e la chiamo descrizione
descrizione auto e qui faccio all'output
direttamente
io adesso voglio usare il metodo della
classe del genitore dentro al al metodo
della classe del figlio come faccio a
fare questo si usa sempre allora metto
dentro si usa sempre la keyword super la
con la keyword super ci si rivolge al
padre si invoca il metodo descrizione
veicolo ecco qui e poi si continua
come si vuole in particolare che abbiamo this.marca e this.colore il
colore
ecco qui quindi cosa sto facendo qui
allora io ho creato la classe padre che
può essere usata tranquillamente per
creare oggetti poi per non stare lì a
ripetere il codice che ho già scritto
nella classe padre possa estendere
eccola qui la classe padre in una classe
figlio in questo caso auto e dove vado a
usare quando si estende una classe padre
si deve usare la keyword super per
rivolgersi alla classe padre e posso
usare le proprietà della classe padre e
anche i metodi della classe padre
quindi adesso se io vado a creare un
nuovo oggetto dalla classe figlia ad
esempio io voglio creare un cost usiamo
sempre la polo keyword new auto
adesso io devo passarci dentro quattro
argomenti
quindi il primo è ruote netto quattro
ruote motore metto vero sì perché c'è il
motore poi ci metto volkswagen e poi ci
metto il colore blu
se adesso io vado a vedere la output
allora come vedete io posso andare a
vedere le proprietà della classe figlio
eccola qui volkswagen ma possono anche
andare a vedere le proprietà della
classe padre ad esempio ruote
la classe figlio eredita tutte le
proprietà e metodi della classe padre
quindi io tutti gli oggetti che derivano
dalla classe figlio automaticamente
hanno proprietà e metodi della classe
figlio e della classe padre quindi posso
anche fare polo descrizione
auto e mi trovo che questo è un veicolo
a motore ed ha quattro ruote questo è la
stringa ritornata dal metodo del classe
padre e in più
trovo anche l'altra un'altra parte della
stringa che fa parte del metodo della
classe figlio
eccolo qui semplici e possono anche
andare a vedere usando il mio
oggetto creato posso andare a invocare
il metodo della classe padre descrizione
veicolo ecco questo è un piccolo motore
da quattro ruote con questo è tutto
questa è l'ereditarieta' in javascript vi
ripeto ancora questa è la la sintassi
dell'ecma script 6 si può fare la stessa
cosa con la vecchia sintassi è un po più
articolato quindi io per semplicità vi
ho fatto vedere questo e solo questo
appunto perché restiamo questo è un
corso base quindi non voglio
fare troppa confusione andare troppo in
profondità con questo è tutto ci
sentiamo la prossima ciao
Link correlati:
Link per il video che spiega come creare una classe
File del video:
