Object defineproperties — CodingCreativo

In questa lezione studieremo il metodo object defineproperties e lo utilizzeremo anche assieme al metodo object create in qualche esempio.

Object defineproperties - sintassi

La sintassi è la seguente

Object.defineProperties(object, prop)

Dove object rappresenta l'oggetto su cui definire nuove proprietà o modificare quelle precedenti.

Mentre prop è un oggetto che contiene delle proprietà. Ad ogni proprietà è assegnato un descrittore che regola alcune caratteristiche, come quelle mostrate nei paragrafi successivi.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

value

Il primo descrittore associato al metodo Object defineproperties che studieremo è value. Value rappresenta il valore associato alla proprietà che si sta definendo. Di default è undefined ma è possibile specificare un valore numerico, una stringa, un oggetto, una funzione, ecc.

Facciamo un semplice esempio d'utilizzo, creando un prototipo auto su cui definiamo la proprietà tipo a cui assegniamo il valore benzina.

var auto = {};

Object.defineProperty(auto, 'tipo', {
  value: 'benzina',
});

console.log(auto.tipo);

writable

Un altro descrittore di Object defineproperties è writable. Questo valore di default è uguale a false, si imposta a true se si vuole cambiare il valore associato per quella proprietà.

Facciamo un esempio in cui definiamo un oggetto vuoto. Dopo definiamo la proprietà tipo a cui daremo il valore benzina e poi impostiamo writable a true.

In questo modo il primo console.log darà come risultato benzina, mentre il secondo diesel.

var auto = {};

Object.defineProperty(auto, 'tipo', {
  value: 'benzina',
  writable: true
});

console.log(auto.tipo);

auto.tipo = 'diesel';
console.log(auto.tipo);

Diversamente se lasciamo writable al suo valore di default, false, il secondo console.log darà sempre il valore benzina, perché non è possibile modificare tale valore.

configurable

Anche questo descrittore di default è uguale a false, si imposta uguale a true se si vuole che la proprietà può essere cambiata o anche cancellata.

Seguendo l'esempio di prima, aggiungiamo il descrittore configurable con il valore true.

Dopo aver fatto il delete, cioè dopo aver eliminato la proprietà tipo, il secondo console log restituisce undefined.

Diversamente se configurable viene lasciato al valore di default false.

In questo caso l'operazione di delete non è consentita ed il secondo console.log mi restituisce lo stesso valore del primo.

var auto = {};

Object.defineProperty(auto, 'tipo', {
  value: 'benzina',
  writable: true,
  configurable: true
});

console.log(auto.tipo);
delete auto.tipo;
console.log(auto.tipo);

enumerable

Il descrittore enumerable del metodo Object defineproperties ha il valore di default uguale a false, ma si può impostare a true se la proprietà deve essere visualizzata durante una enumerazione. Come ad esempio nel caso del for in.

Nell'esempio sotto definiamo le proprietà tipo e anno con il descrittore enumerable a true, mentre definiamo marca uguale a false.

Dopo con un for in generiamo degli alert delle proprietà con valore enumerable uguale a true.

Il seguente codice farà dunque vedere a video degli alert delle proprietà tipo ed anno ma non della marca.

var auto = {};

Object.defineProperty(auto, 'tipo', {
  value: 'benzina',
  writable: true,
  enumerable: true
});

Object.defineProperty(auto, 'anno', {
  value: '2020',
  writable: true,
  enumerable: true
});

Object.defineProperty(auto, 'marca', {
  value: 'Fiat',
  writable: true,
  enumerable: false
});

console.log(auto.tipo);

for(var key in auto){
        alert(key);
};

get

Get è una funzione che serve a prelevare un dato per la proprietà.

Vediamo un semplice esempio di utilizzo:

var auto = {
    marca: 'fiat',
    modello: '500',
    get visualizza() {
        return this.marca + ' ' + this.modello;
    }
}

console.log(auto.visualizza);

set

Una funzione che serve per impostare il dato della proprietà.

Ecco un semplice esempio dimostrativo:

var auto = {
    set visualizza (model) {
      var modelloAuto = model.toString().split(' ');
        this.marca = modelloAuto[0];
        this.modello = modelloAuto[1];
    }
}
auto.visualizza = 'Fiat 500';
console.log(auto.marca);
console.log(auto.modello);

Object defineproperties - esempio

Facciamo adesso un esempio creando un prototipo di nome autoPrototype su cui costruiremo il metodo visualizza.

Dopo, partendo da questo prototipo, definiamo le proprietà dell'oggetto: marca, modello, tipo e anno.

Infine richiamiamo sull'istanza auto1 il metodo visualizza.

var autoPrototype = {
  visualizza: function(){
		r = this.marca + ' ' + this.modello  + ' '  + this.tipo + ' ' + this.anno;
    console.log(r);
	}
}
var auto1 = Object.create(autoPrototype, {
  'marca': {
    value: "Fiat",
    writable: true
  },
  'modello': {
    value: "500",
    writable: true
  },
  'tipo': {
  	value: "benzina",
  	writable: true
  },
  'anno': {
  	value: "2020",
  	writable: true
    }
});

auto1.visualizza();

Lezione precedente: Object create

Lezione successiva: object assign