Creare un oggetto in JavaScript, oggetti letterali e new

In questa lezione impareremo a creare un oggetto in JavaScript e anche ad utilizzare proprietà e metodi.

Innanzitutto è fondamentale precisare che quando si crea un oggetto si crea un riferimento all’oggetto.
Il riferimento all’oggetto si può anche memorizzare in una variabile. Grazie a questo riferimento è poi possibile utilizzare l’oggetto all’interno del nostro programma.

Si dice anche che una variabile punta ad un oggetto.

Come creare un oggetto in JavaScript utilizzando new

Per creare un oggetto in JavaScript si può utilizzare la parola chiave new, seguendo questa sintassi:

var nomeOggetto = new oggetto();

La variabile nomeOggetto contiene il riferimento all’istanza oggetto appena creato.

È anche possibile specificare i parametri del costruttore seguendo questa sintassi:

var nomeOggetto = new oggetto(parametriCostruttore);

Esempio 1 – creare un oggetto in JavaScript

Utilizziamo, in questo esempio, l’oggetto Date(), che è integrato nelle API (librerie) del linguaggio JavaScript e consente di gestire facilmente le date.


var dataCorrente = new Date();
var annoCorrente = dataCorrente.getFullYear();

console.log(annoCorrente);

La variabile dataCorrente contiene il riferimento all’istanza Date(), quindi la possiamo utilizzare all’interno del nostro programma con i metodi propri dell’oggetto Date.

Nel nostro esempio utilizziamo il metodo getFullYear() per ottenere l’anno corrente.

Notiamo anche che al costruttore Date non stiamo passando nessun valore, e quindi verrà creato un oggetto Date che contiene la data e l’ora corrente.

Facciamo adesso un altro esempio dove al costruttore passiamo una stringa che indica una determinata data.


var data = new Date('2020,07,31');
console.log(data);

Esempio 2 – creare un oggetto in JavaScript

Creiamo un oggetto stringa come nell’esempio sotto:


var stringa = new String('Ciao a tutti da Coding Creativo');

console.log(stringa);
console.log(stringa.length);

La variabile stringa contiene il riferimento all’istanza String(), dove passiamo come parametro una stringa qualunque.

L’oggetto String ha la proprietà length che restituisce il numero di caratteri contenuti in una stringa.

Adesso utilizziamo il metodo toUpperCase() della classe String() per trasformare il testo in maiuscolo.


stringa = stringa.toUpperCase();
console.log(stringa);

Come creare un oggetto in JavaScript utilizzando gli Oggetti letterali

A partire dalla versione JavaScript 1.2, c’è un altro modo per creare oggetti. In particolare si possono creare oggetti anche solo elencando le proprietà con i rispettivi valori, mediante una sequenza di coppie nome:valore separate da virgole racchiuse tra parentesi graffe.

Creiamo dunque un oggetto, che memorizziamo in una variabile di nome persona, utilizzando questa notazione.

Esempio 3


var persona = {
    nome:'Coding', 
    cognome:'Creativo', 
    anni:30
};

Dopo aver creato l’oggetto possiamo accedere alle sue proprietà utilizzando la notazione puntata (dot notation). Tutte le proprietà di un oggetto sono pubbliche e accessibili.

Ad esempio se voglio utilizzare la proprietà nome posso scrivere:

console.log(persona.nome);

Oppure si può usare la notazione con le parentesi quadre:

console.log(persona['nome']);

Quest’ultima notazione è utile quando dobbiamo utilizzare il ciclo for in, come vedremo nelle prossime lezioni, in quanto possiamo utilizzare al posto del nome della proprietà anche una variabile.

Adesso definiamo anche un metodo da poter utilizzare sull’oggetto persona, aggiungendo una proprietà saluto a cui assegneremo una funzione.

In definitiva possiamo dire che un metodo è una funzione memorizzata come proprietà.

Esempio 4 – Creare un oggetto in JavaScript


var persona = {
  nome:'Coding',
  cognome:'Creativo',
  anni:30,
  saluto: function (){
    alert ('ciao sono ' + this.nome + ' ' this.cognome);
  }
};

persona.saluto();

Quindi quando richiamiamo il metodo saluto sull’istanza persona, comparirà la finestra di alert con il saluto specificato.

Esempio 5

Si possono anche passare dei parametri, come nell’esempio sotto:


var persona = {
  nome:'Coding',
  cognome:'Creativo',
  anni:30,
  saluto: function (){
    alert ('ciao sono ' + this.nome + ' ' + this.cognome);
  },
  calcolaAnno: function (anno){
    return anno - this.anni;
  },
};

persona.saluto();
console.log('sei nato nel ', persona.calcolaAnno(2020));

Alla funzione calcolaAnno abbiamo passato l’anno corrente per poi calcolare l’anno di nascita dell’utente.

Quindi richiamiamo il metodo calcolaAnno sulla nostra persona.

Chiaramente questo è un banalissimo esempio, non consente infatti di calcolare con esattezza l’anno di nascita se ad esempio l’utente non ha ancora compiuto gli anni.

Come creare un oggetto in JavaScript utilizzando una funzione costruttore

Utilizziamo una funzione a cui diamo un nome, ad esempio person e a cui passiamo 3 parametri che rappresentano il nome, il cognome e l’età.

Dopo in una variabile di nome amico memorizziamo il riferimento all’oggetto person a cui passeremo i nostri valori.

Successivamente per poter visualizzare ad esempio l’età utilizzo la notazione puntata come nel caso precedente.

Esempio 6


var amico = new person('Coding','Creativo',30);
console.log(amico.eta);

function person (n,c,e){
  this.nome = n;
  this.cognome = c;
  this.eta = e;
}

La parola chiave this, in questo caso, rappresenta un determinato oggetto e fa riferimento a person.

Nel caso in cui abbiamo bisogno di una funzione che opera su un oggetto si può inserire anche come proprietà.

Dopo richiamiamo il metodo saluto sulla variabile che contiene il riferimento all’oggetto person.


var amico = new person('Coding','Creativo',30);

function person (n,c,e){
  this.nome = n;
  this.cognome = c;
  this.eta = e;
  this.saluto = function() {
    alert ('ciao sono ' + this.nome);
 }
}

//richiamiamo il metodo saluto sulla variabile che contiene il riferimento all'oggetto person 
amico.saluto();

Se abbiamo più istanze si può ad esempio scegliere su quale istanza richiamare il metodo:


var amico = new person('Mario','Rossi',30);
var amico2 = new person('Coding','Creativo',30);
console.log(amico.eta);

function person (n,c,e){
  this.nome = n;
  this.cognome = c;
  this.eta = e;
  this.saluto = function() {
    alert ('ciao sono ' + this.nome);
 }
}

amico2.saluto();

Si può anche utilizzare la proprietà superiore prototype in questo modo:


var amico = new person('Mario','Rossi',30);
var amico2 = new person('Coding','Creativo',30);
console.log(amico.eta);

function person (n,c,e){
  this.nome = n;
  this.cognome = c;
  this.eta = e;
}

person.prototype.saluto = function (){
  alert ('ciao sono ' + this.nome);
}

amico2.saluto();

In questa lezione abbiamo visto come creare un oggetto in JavaScript, nella prossima lezione approfondiremo ancora il concetto di oggetto.

Lezione precedente: introduzione agli oggetti in JavaScript

Lezione successiva: object in JavaScript