JavaScript: gli Oggetti

Scritto da ambrix on 13/07/2019. Postato in Corsi Programmazione, NotInHome Nessun Commento

Lezione#10 In quest’ultima lezione del minicorso JavaScript in 10 passi, faremo una panoramica delle tecniche di programmazione orientata agli oggetti (OOP) con Javascript.

Introduciamo cosa sono gli Oggetti e associamoli al JavaScript. Un oggetto è un contenitore di valori, anche di diverso tipo, messi insieme a formare una struttura dati unica e tale da avere una particolare identità.

// Esempio #01

var person = {};
console.log(typeof person);

object

Abbiamo appena creato un oggetto, usando una coppia di parentesi graffe: un tale tipo di dato è anche conosciuto come object literal. Da quanto scritto finora, sembrerebbe quasi che sia un tipo di dato simile ad un array. Tuttavia, rispetto ai valori di un array, le proprietà degli oggetti hanno un vantaggio importante: un nome.

// Esempio #02

var person = {name: "Bruce", age: 42, height: 1.79};
console.log(person);

{name: “Bruce”, age: 42, height: 1.72}

La sintassi mostra come definire un oggetto utilizzando la notazione letterale che si avvale, dopo la definizione del nome dell’oggetto, delle parentesi graffe al cui interno si pongono i nomi delle proprietà separate dai valori dal carattere due punti (:). Ciascuna proprietà è poi separata da un’altra mediante il carattere virgola (,).

Vediamo ora come accedere ad una specifica proprietà.

// Esempio #03

var person = {
 name: "Bart",
 age: 12,
 height: 1.52
};
console.log(person.name);

Bart

Come risulta ben evidente, possiamo accedere ad una proprietà usando la dot notation (person.name); in alternativa è possibile usare le parentesi quadre (person[‘name’]), ricordandosi di racchiudere tra apici o virgolette la stessa proprietà.

Possiamo, poi, cambiare i valori delle proprietà a nostro piacimento, assegnando un differente valore ad essi.

// Esempio #04

var person = { 
name: "Bart", 
age: 12, 
height: 1.52 
}; 
person.age = 15.0;
console.log(person.name);

{name: “Bart”, age: 15.0, height: 1.52}

Ma non solo possiamo apportare modifiche alle proprietà, possiamo anche crearne di nuove o eliminare quelle che non ci servono più.

// Esempio #05

var person = { 
  name: "Bart", 
  age: 12, 
  height: 1.52 }; 
  person.hair = "yellow";
  delete person.height;
console.log(person);

{name: “Bart”, age: 12, hair: “yellow”}

Con la keyword delete eliminiamo qualcosa, mentre richiamando una nuova proprietà sull’oggetto, aggiungiamo qualcosa.

Un aspetto importante di un oggetto riguarda la possibilità di definire dei parametri come funzioni. Vediamo il seguente esempio.

// Esempio #06
 
var person = { 
 name: "Bart", 
 age: 12, 
 height: 1.52, 
 speak: function() {
  console.log("Hi, I'm " + this.name + "!");
 }
};
person.speak();

Hi, I’m Bart!

Ottimo lavoro! Abbiamo definito un metodo assegnando una funzione a una proprietà e invocandola come una normale funzione.

L’utilizzo dell’operatore this all’interno della funzione talk che rappresenta il corrente oggetto di invocazione, ossia si riferisce all’oggetto stesso (person) cui la proprietà speak appartiene.

Cosa succede se vogliamo creare più oggetti con le stesse proprietà e metodi, ma con valori diversi?

//Esempio #07

function Person(name, age, height) {
 this.name = name;
 this.age = age;
 this.height = height;
 this.speak = function() {
  console.log("Hi, I'm " + this.name + "!");
 }
}
var p1 = new Person("Peter", 19, 1.75);
console.log(p1.name);

Peter

Sviluppando una constructor function, possiamo usare new per creare tutte le istanze di un oggetto, nel modo che ci è di maggior utilità.

Ritorna alla precedente <– []