• seguici su feed rss
  • seguici su twitter
  • seguici su linkedin
  • seguici su facebook
  • cerca

SEI GIA' REGISTRATO? EFFETTUA ADESSO IL LOGIN.



ricordami per 365 giorni

HAI DIMENTICATO LA PASSWORD? CLICCA QUI

NON SEI ANCORA REGISTRATO ? CLICCA QUI E REGISTRATI !

Gli oggetti in javascript, le proprietà, i metodi e la parola chiave this.

di :: 06 settembre 2022
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.cognome

In 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 esiste

Esempio 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.

 
 
 
 
pay per script

Hai bisogno di uno script PHP personalizzato, di una particolare configurazione su Linux, di una gestione dei tuoi server Linux, o di una consulenza per il tuo progetto?

x

ATTENZIONE