Approfondire gli oggetti

Abbiamo già fatto un'introduzione agli oggetti di JavaScript nel video sez2/10, quindi in questo video andremo sviscerare tutti gli altri aspetti e caratteristiche. Capiremo perchè si dice che JavaScript è un linguaggio di programmazione orientato agli oggetti e basato sui prototipi.
Abbiamo già detto che JavaScript ha 2 famiglie di valori: primitivi e oggetti. Della famiglia degli oggetti fanno parte: oggetti, array e funzioni.
In questo video, cominceremo parlando: degli oggetti letterali, delle proprietà e dei metodi. Poi passeremo a parlare delle funzioni costruttrici o costruttori (in inglese "constructor function") ovvero funzioni usate per creare oggetti.
Infine introdurremo anche il concetto di prototipo (prototype) e di istanza (instance).

Trascrizione: (click per espandere)
salve a tutti in questo video parlerò un
po più in dettaglio degli oggetti di
javascript
vi invito a riguardare il video della
sezione 2 che introduce gli oggetti e
adesso continuo andare un po' più in
profondità
allora se vi ricordate un oggetto
letterale si crea con la keyword let
const poi si dà un nome ad esempio panda
e poi si aprono le parentesi graffe al
suo all'interno delle parentesi graffe
si scrivono le proprietà dell'oggetto
che può essere marca quindi metto fiat
poi metto colore e metto rosso e poi
posso mettere una proprietà descrizione
descrizione che è una funzione e quindi
quando una proprietà rappresenta una
funzione si dice che è un metodo e li
mettiamo console log this.marca this.colore
ecco qui allora io qui ho creato un mio
oggetto ho tre proprietà la proprietà
marca con un valore fiat la stringa fiat
la proprietà colore con il valore
stringa rossa e poi è la proprietà
descrizione che avendo al suo interno
una funzione si prende il nome di metodo
e tutto questo lo abbiamo già visto
se adesso io voglio andare a
vedere un po di output qui metto il nome
del mio oggetto e poi scrivo il nome
della mia proprietà allora per esempio
descrizione e come vedete qui io qui ho
fiat rossa perché vado a richiamare i
valori delle proprie delle altre
proprietà del mio oggetto con la keyword
this seguite dal punto e poi il nome
della proprietà
eccolo qua niente abbiamo già visto
tutte queste cose se adesso io voglio
aggiungere una proprietà al mio oggetto
basta solo che scrivo il nome
dell'oggetto poi metto il nome della
proprietà ad esempio ruote e ci assegno
un numero 4
se adesso voglio andare a vedere il
valore della mia nuova proprietà panda
ruote e ho il 4 perfetto questo è e
gli oggetti in javascript come li abbiamo
visti fino adesso però se io devo creare
ad esempio un oggetto come in questo
caso per ogni tipo di auto diventa un pò
tedioso creare per ogni tipo di auto un
oggetto e dichiarare tutte queste
proprietà eccetera eccetera quindi per
fare questo si fa
si passa a usare un costruttore allora
innanzitutto in javascript tutti gli
oggetti derivano le proprie proprietà e
metodi da un prototipo è il prototipo è
come abbiamo visto in alcuni casi gli
oggetti built in di javascript come ad
esempio date object array eccetera
tutti gli oggetti che derivano da questi
oggetti derivano ereditano tutte le
proprietà degli oggetti padri
chiamiamoli quindi gli oggetti figli che
derivano dall oggetto padre
automaticamente eredita anche le
proprietà dell'oggetto padre come
facciamo noi a creare un nostro oggetto padre usiamo un costruttore come si
crea un costruttore si si mette la
keyword function poi si mette il nome
del costruttore in questo caso metto
auto parentesi graffe e posso mettere this
marca anzi qui ci passo marca che
colore è this.marca e metto marca this.colore
colore e poi ci metto un this.descrizione descrizione
function console log
this.marca ecco qui che differenza c'è tra
questo tipo di come vedete bene o male
sta usando la stessa sintassi per il
miur oggetto letterale in questo caso in
questa funzione
in questo caso io sto usando una
funzione come costruttore e lo si può
vedere perché io uso come la prima
lettera del nome del mio
costruttore con la lettera maiuscola
questa è una non è obbligatorio ma è una
maniera comune per distinguere una
normale funzione da una funzione che
svolge la che svolge l'attività di
costruttore poi ci passo dentro due
argomenti in questo caso marche colore
poi questi argomenti li assegno alle
proprietà della funzione quindi saranno
le proprietà del mio oggetto finale e
poi creò anche una un metodo descrizione
in cui vado a fare l'output della
proprietà marca della priorità colore se
adesso io voglio creare un oggetto da
questo costruttore non devo far altro
che dichiarare l'oggetto ad esempio
const posso usare anche let nessun
problema nome dell'oggetto keyword new
auto e ci passo dentro gli
argomenti allora volkswagen e blu
ecco qui adesso io sto usando il
costruttore per creare degli oggetti con
questo costruttore diciamo che è
possiamo vederlo come un
un progetto disegnato sulla carta
il progetto è sempre lo stesso però io
dallo stesso progetto posso creare
diversi oggetti tutti gli oggetti si
assomiglieranno perché avranno le stesse
caratteristiche per che derivano dallo
stesso progetto per ogni diverso ogni
progetto e ogni oggetto creato sarà
diverso perché ovviamente o più oggetti
quindi io adesso ad esempio l'oggetto
polo che usa il costruttore auto
passando questi argomenti e adesso se io
voglio andare a vedere le proprietà
dell'oggetto polo faccio polo anzi console
log polo proprietà marca
vediamo cosa dice pollo perché questo
qui ok volkswagen
se adesso vado a vedere la proprietà
colore mi dice blu se adesso io vado a
usare il metodo del mio oggetto non mi
serve perché già file printing polo
descrizione eccolo qui volkswagen blu io
con usando lo stesso costruttore possa
creare ancora un altro quanti oggetti mi
pare quindi per esempio adesso const
posso mettere astra è sempre keyword new
auto che in nome della della funzione
costruttore e ci passo dentro opel e ci
passo dentro verde la stessa cosa posso fare
per la mia astra ecco qua o perderà come
vedete io sto usando lo stesso progetto
per creare oggetti diversi che però
hanno tutte le stesse caratteristiche
quindi io una volta creato il mio
costruttore posso creare un'infinita di
oggetti che sono tutti di chiamiamoli
fratelli perché derivano tutti quanti
dallo stesso genitore
e e condividono tutte le stesse
proprietà se adesso io voglio far vedere
che il mio oggetto polo deriva instance
dall'oggetto auto
uso l'operatore instanceof e
vedete che è vero quindi il mio oggetto
polo deriva dal mio costruttore auto
quindi il costruttore auto è un
prototipo del mio oggetto polo come
faccio aggiungere una proprietà a un
costruttore si deve usare la keyword
prototype allora io scrivo perché ad
esempio voglio aggiungere una nuova
proprietà che la chiamo chilometraggio
allora io nome del costruttore prototype
e poi il nome della mia nuova proprietà
e per esempio chilometraggio
abbiamo detto chilometraggio e gli
assegnò un 50
anzi facciamo 100 km nel momento in cui
io aggiungo una proprietà a un
costruttore tutti gli oggetti che
discendono dal mio costruttore avranno
una nuova proprietà quindi sia adesso io
uso polo chilometraggio anzi però devono
metterlo dentro un output polo
chilometraggio cento e stessa cosa sarà
anche per la mia astra cento c'è quindi
nel momento in cui io vado aggiungere
una proprietà a 1 a un costruttore tutti
gli oggetti che discendono da quel
costruttore come abbiamo detto avranno
questa nuova proprietà stessa cosa posso
fare per un nuovo per un nuovo metodo ad
esempio e allora sempre nome del
costruttore prototype e nome del nuovo
metodo ad esempio tagliando
quindi io assegno una funzione perché
sto parlando di metodo
e qui ci metto km futuri come parametro
e vado a fare la output console log
this.chilometraggio più chilometri futuri
ecco qui e come abbiamo visto per la
proprietà chilometraggio anche il
tagliando adesso sarà sarà ereditato da tutti gli oggetti che derivano
dal mio costruttore quindi polo
tagliando si passò dentro 500 km
sbagliato eccolo 600 perché io vado ad
aggiungere 500 che sono il mio argomento
dei chilometri futuri ha la proprietà
chilometraggio e quindi o 600 magari per
l'astra se io ci passo dentro astra
1.500 avro' 1.600 serio ecco qui con
questo abbiamo detto tutto quindi
ricordatevi se io devo usare un un
oggetto per un determinato scopo posso
usare un oggetto letterale
se io devo usare lo stesso tipo di
oggetto in molte volte è più facile
creare un costruttore che poi crea tutti
questi oggetti condividendo lo stesso
codice
con questo è tutto ci sentiamo alla
prossima ciao
File del video: