Gli oggetti in javascript, le proprietà, i metodi e la parola chiave this.
Gli oggetti, in javascript, sono delle collezioni (dei contenitori, degli archivi) di dati (chiamati "proprietà"), correlati tra di loro, quindi che abbiano un senso metterli all'interno dello stesso contenitore.
Un oggetto, ad esempio, potrebbe contenere i dati una persona: il nome, il cognome, l'età,...
<script>
var user = {
nome: "Paolo",
cognome: "Rossi",
eta: 25
};
</script>Questo "user" è un oggetto (e potevi chiamarlo come volevi, ad esempio "utente"), e si presenta come un insieme di proprietà (nome,cognome,...) caratterizzate da coppie chiave / valore.
Questo oggetto avremmo potuto scriverlo anche così:
<script>
var user = new Object({
nome: "Paolo",
cognome: "Rossi",
eta: 27
});
</script>Le proprietà di un oggetto
L'oggetto "user", creato nell'esempio precedente, presenta alcune proprietà caratterizzate ognuna da una chiave (ad esempio "cognome") con relativo valore (ad esempio "Rossi").
La "chiave" della proprietà è una stringa composta da una o più parole.
Il "valore" della proprietà può essere un dato di qualsiasi tipo: una stringa, un numero, un array, un booleano (true/false), una data, una funzione, un altro oggetto!
Ecco un esempio di proprietà con un valore booleano, un array, ed un altro oggetto:
<script>
var user = {
nome: "Paolo",
cognome: "Rossi",
eta: 25,
isadmin: true,
interessi: ['calcio','basket','formula 1'],
indirizzo: {
via: "Via Roma",
numero: 15,
cap: "00128",
citta: "Torino"
}
};
</script>Come accedere alle proprietà dell'oggetto
Possiamo facilmente accedere alle proprietà dell'oggetto. Ad esempio, se volessi accedere alla proprietà "cognome", utilizzerò questa notazione puntata, chiamata "dot notation"
var cognome=user.cognomeIn alternativa possiamo usare la "bracket notation", cioè le parentesi quadre con all'interno la chiave tra virgolette
var cognome=user["cognome"];Apriamo una popup con il valore del cognome
alert(cognome);Vediamo come accedere ad una proprietà di tipo array, come gli "interessi". In questo caso utilizziamo il console.log invece dell'alert.
Essendo un array dovrò indicare l'indice al suo interno, ad esempio l'indice 2 ("formula 1")... ricordando che gli indici partono da 0!
console.log(user.interessi[2]);Oppure usando le parentesi quadre
console.log(user["interessi"][2]);Se invece dobbiamo accedere ad un sotto oggetto, come è l' "indirizzo", faremo così:
console.log(user.indirizzo.cap);O in alternativa
console.log(user["indirizzo"]["cap"]);Possiamo manipolare questo oggetto, aggiungendo o togliendo una proprietà.
Come aggiungere una proprietà ad un oggetto
Per aggiungere una nuova proprietà utilizziamo la "dot notation"
user.telefono = "+39 123456789";In alternativa, possiamo utilizzare la "bracket notation", così:
user["telefono"] = "+39 123456789";Come detto all'inizio di questo articolo, la chiave può contenere più parole, ed in questo l'utilizzo della parentesi quadra è l'unica strada percorribile, come in questo esempio
user["colore occhi"] = "verde";Un altro modo per ottenere lo stesso risultato è creare una variabile, ad esempio "chiave" e utilizzare questa variabile nella parentesi quadra
var chiave = "colore occhi";
user[chiave] = "verde";Come eliminare una proprietà di un oggetto
Per eliminare una proprietà, ad esempio quella aggiunta sopra
delete user.indirizzo;In alternativa, utilizziamo le parentesi quadre
delete user["indirizzo"];Creare un oggetto vuoto
Possiamo creare un oggetto vuoto e poi, aggiungere le sue proprietà.
var user = {};oppure così
var user = new Object();
Creato un oggetto vuoto possiamo poi popolarlo come visto in precedenza.
Come verificare se una proprietà esiste
Vediamo adesso come verificare se una proprietà esiste.
Se proviamo ad eccedere ad una proprietà che non esiste, la risposta che otterremo sarà un "undefined", per cui per verificare se non esiste:
if(user.telefono===undefined){alert("non esiste");}E quindi per verificare se esiste:
if(user.telefono!==undefined){alert("esiste");}Esiste anche uno speciale operatore per raggiungere lo stesso scopo: è l'operatore "in" che si utilizza in questa sintassi
"chiave" in "oggetto"Produciamo delle popup alert
alert( "cognome" in user ); // rende true, significa che user.cognome esiste
alert( "taglia" in user ); // rende false, significa che user.taglia non esisteEsempio di utilizzo dell'operatore "in"
if("cognome" in user){alert("esiste");}Ciclare gli oggetti
Per effettuare un ciclo su tutte le proprietà dell'oggetto, utilizziamo il ciclo for con la sintassi
for (key in object) {
// esegue il corpo del ciclo per ogni proprietà dell'oggetto
}Ad esempio
for (var key in user) {
// keys
alert( key ); // nome, cognome, ...
// valori delle keys
alert( user[key] ); // mario, rossi, ....
}I metodi di un oggetto
Mentre le proprietà rappresentano dati dell'oggetto, un metodo è una funzione associata all'oggetto, cioè rappresenta una attività che l'oggetto può compiere.
Riceve dei dati in input, li elabora e restituisce un output.
Ampliamo il primo esempio, aggiungengo un metodo, chiamato ad esempio "saluta"
<script>
var user = {
nome: "Paolo",
cognome: "Rossi",
eta: 25,
isadmin: true,
interessi: ['calcio','basket','formula 1'],
indirizzo: {
via: "Via Roma",
numero: 15,
cap: "00128",
citta: "Torino"
},
saluta: function(){
alert('Ciao sono ${user.nome}');
}
};
</script>Il metodo "saluta" è semplicemente una funzione dell'oggetto.
Per accedere al metodo, lo chiameremo così:
user.saluta();La parola chiave "this"
La parola chiave "this" significa "questo", e si riferisce all'oggetto stesso. Rivediamo l'esempio precedente e concentriamoci sul medoto "saluta"
saluta: function(){
alert('Ciao sono ${user.nome}');
}
Possiamo riscriverlo così
saluta: function(){
alert('Ciao sono ${this.nome}');
}
Quindi "this" va a prendere, come contesto, l'oggetto in cui è inserito, e nel nostro caso è l'oggetto "user".
Questo esempio con l'alert non è di grande aiuto all'atto pratico, mentre in molte situazioni potremmo volere che questo metodo (funzione) restituisca il nome dello user, così da poterlo poi utilizzare nello script.
<script>
var user = {
nome: "Paolo",
cognome: "Rossi",
eta: 25,
isadmin: true,
interessi: ['calcio','basket','formula 1'],
indirizzo: {
via: "Via Roma",
numero: 15,
cap: "00128",
citta: "Torino"
},
saluta: function(){
return this.nome;
}
};
// catturiamo il nome restituito dal medoto saluta
var ilnome=user.saluta();
</script>
Così facendo abbiamo creato la variabile "ilnome" che contiene il nome dell'utente, e potremmo utilizzarlo all'interno del nostro script.
E con questo esempio abbiamo concluso le basi degli oggetti in javascript.
