JavaScript - Metodi oggetto ES5

Ciao a tutti, futuri maghi di JavaScript! Oggi ci immergeremo nel mondo magico dei metodi oggetto ES5. Non preoccupatevi se siete nuovi al编程 – sarò il vostro guida amichevole in questa avventura, e procederemo passo per passo. Alla fine di questo tutorial, manipolerete gli oggetti come un professionista!

Metodi oggetto JavaScript ES5

Prima di iniziare, ripassiamo rapidamente cosa sono gli oggetti in JavaScript. Pensa a un oggetto come a un contenitore che contiene informazioni correlate. Per esempio, un oggetto "car" potrebbe contenere proprietà come colore, marca e anno.

let car = {
color: "red",
brand: "Toyota",
year: 2020
};

Ora, ES5 ha introdotto diversi metodi potenti per lavorare con questi oggetti. Esploriamoli uno per uno!

Metodo JavaScript Object.create()

Il metodo Object.create() ci permette di creare un nuovo oggetto utilizzando un oggetto esistente come prototype. È come dire, "Ehi JavaScript, crea per me un nuovo oggetto che eredita da questo altro oggetto!"

let animal = {
makeSound: function() {
console.log("Some generic animal sound");
}
};

let dog = Object.create(animal);
dog.makeSound(); // Output: Some generic animal sound

dog.bark = function() {
console.log("Woof woof!");
};

dog.bark(); // Output: Woof woof!

In questo esempio, abbiamo creato un oggetto dog che eredita dal oggetto animal. Il dog può utilizzare il metodo makeSound da animal, ma ha anche il suo metodo bark.

Metodo JavaScript Object.defineProperty()

Object.defineProperty() ci permette di aggiungere o modificare una proprietà di un oggetto. È come poter aggiungere una nuova funzione alla tua auto dopo averla acquistata!

let person = {};

Object.defineProperty(person, "name", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});

console.log(person.name); // Output: John
person.name = "Jane"; // Questo non cambierà il nome
console.log(person.name); // Output: John

Qui, abbiamo aggiunto una proprietà name all'oggetto person. L'abbiamo impostata come non scrivibile, il che significa che non possiamo cambiare il suo valore dopo che è stato impostato.

Metodo JavaScript Object.defineProperties()

Object.defineProperties() è come defineProperty(), ma potenziato! Permette di definire più proprietà contemporaneamente.

let book = {};

Object.defineProperties(book, {
title: {
value: "The Great Gatsby",
writable: true
},
author: {
value: "F. Scott Fitzgerald",
writable: false
}
});

console.log(book.title); // Output: The Great Gatsby
console.log(book.author); // Output: F. Scott Fitzgerald

book.title = "Gatsby"; // Questo funziona
book.author = "Scott"; // Questo non funziona

console.log(book.title); // Output: Gatsby
console.log(book.author); // Output: F. Scott Fitzgerald

In questo esempio, abbiamo definito due proprietà per il nostro oggetto book in una volta. La title è scrivibile, ma l'author non lo è.

Metodo JavaScript Object.getOwnPropertyDescriptor()

Questo metodo ci permette di ottenere la descrizione di una proprietà. È come chiedere le specifiche di una particolare funzione della tua auto.

let car = {
brand: "Toyota"
};

let descriptor = Object.getOwnPropertyDescriptor(car, "brand");

console.log(descriptor);
// Output:
// {
//   value: "Toyota",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Qui, stiamo ottenere il descrittore della proprietà brand del nostro oggetto car. Ci dice il valore e se la proprietà è scrivibile, enumerabile e configurabile.

Metodo JavaScript Object.getOwnPropertyNames()

Questo metodo restituisce un array di tutte le proprietà (enumerabili o meno) trovate direttamente in un dato oggetto. È come ottenere una lista di tutte le funzioni della tua auto, anche quelle nascoste!

let person = {
name: "John",
age: 30
};

Object.defineProperty(person, "ssn", {
value: "123-45-6789",
enumerable: false
});

console.log(Object.getOwnPropertyNames(person));
// Output: ["name", "age", "ssn"]

Anche se abbiamo reso ssn non enumerabile, getOwnPropertyNames() lo include comunque nella lista.

Metodo JavaScript Object.getPrototypeOf()

Questo metodo restituisce il prototype dell'oggetto specificato. È come chiedere, "Chi è il tuo genitore?"

let animal = {
eats: true
};

let rabbit = Object.create(animal);

console.log(Object.getPrototypeOf(rabbit) === animal); // Output: true

Qui, confermiamo che il prototype di rabbit è davvero l'oggetto animal.

Metodo JavaScript Object.keys()

Object.keys() restituisce un array dei nomi delle proprietà enumerabili di un dato oggetto. È come ottenere una lista di tutte le funzioni visibili della tua auto.

let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};

console.log(Object.keys(car));
// Output: ["brand", "model", "year"]

Questo metodo restituisce solo le proprietà enumerabili, diversamente da getOwnPropertyNames() che restituisce tutte le proprietà.

Metodo JavaScript Object.freeze()

Object.freeze() congela un oggetto. Un oggetto congelato non può più essere modificato. È come mettere la tua auto in un blocco di ghiaccio – non puoi aggiungere, rimuovere o modificare le sue proprietà!

let car = {
brand: "Toyota",
model: "Corolla"
};

Object.freeze(car);

car.year = 2020; // Questo non funzionerà
car.brand = "Honda"; // Questo non funzionerà nemmeno

console.log(car); // Output: { brand: "Toyota", model: "Corolla" }

Dopo aver congelato l'oggetto car, non possiamo aggiungere la proprietà year o modificare il brand.

Metodo JavaScript Object.seal()

Object.seal() sigilla un oggetto, impedendo l'aggiunta di nuove proprietà e segnando tutte le proprietà esistenti come non configurabili. È come sigillare la tua auto – non puoi aggiungere nuove funzioni, ma puoi ancora modificare quelle esistenti.

let person = {
name: "John",
age: 30
};

Object.seal(person);

person.gender = "Male"; // Questo non funzionerà
person.age = 31; // Questo funziona

delete person.name; // Questo non funzionerà

console.log(person); // Output: { name: "John", age: 31 }

Possiamo cambiare age, ma non possiamo aggiungere gender o eliminare name.

Metodo JavaScript Object.isFrozen()

Questo metodo determina se un oggetto è congelato. È come controllare se la tua auto è davvero intrappolata nel blocco di ghiaccio!

let car = {
brand: "Toyota"
};

console.log(Object.isFrozen(car)); // Output: false

Object.freeze(car);

console.log(Object.isFrozen(car)); // Output: true

Metodo JavaScript Object.isSealed()

Simile a isFrozen(), questo metodo controlla se un oggetto è sigillato.

let person = {
name: "John"
};

console.log(Object.isSealed(person)); // Output: false

Object.seal(person);

console.log(Object.isSealed(person)); // Output: true

Metodo JavaScript Object.preventExtensions()

Questo metodo impedisce l'aggiunta di nuove proprietà a un oggetto. È come mettere un cartello "Non più funzioni" sulla tua auto.

let car = {
brand: "Toyota"
};

Object.preventExtensions(car);

car.model = "Corolla"; // Questo non funzionerà

console.log(car); // Output: { brand: "Toyota" }

Dopo aver impedito le estensioni, non possiamo aggiungere la proprietà model.

Metodo JavaScript Object.isExtensible()

Questo metodo determina se un oggetto è estensibile (se può avere nuove proprietà aggiunte).

let car = {
brand: "Toyota"
};

console.log(Object.isExtensible(car)); // Output: true

Object.preventExtensions(car);

console.log(Object.isExtensible(car)); // Output: false

Ecco un riassunto di tutti i metodi che abbiamo trattato:

Metodo	Descrizione
Object.create()	Crea un nuovo oggetto con il prototype specificato e le proprietà
Object.defineProperty()	Aggiunge la proprietà descritta da un dato descrittore a un oggetto
Object.defineProperties()	Definisce nuove o modifica proprietà esistenti direttamente su un oggetto, restituendo l'oggetto
Object.getOwnPropertyDescriptor()	Restituisce un descrittore di proprietà per una proprietà propria di un oggetto
Object.getOwnPropertyNames()	Restituisce un array di tutte le proprietà trovate direttamente in un dato oggetto
Object.getPrototypeOf()	Restituisce il prototype dell'oggetto specificato
Object.keys()	Restituisce un array dei nomi delle proprietà enumerabili di un dato oggetto
Object.freeze()	Congela un oggetto: altre code non possono cancellare o modificare le sue proprietà
Object.seal()	Sigilla un oggetto, impedendo l'aggiunta di nuove proprietà e segnando tutte le proprietà esistenti come non configurabili
Object.isFrozen()	Determina se un oggetto è congelato
Object.isSealed()	Determina se un oggetto è sigillato
Object.preventExtensions()	Impedisce l'aggiunta di nuove proprietà a un oggetto
Object.isExtensible()	Determina se un oggetto è estensibile

Ecco! Avete appena fatto un grand tour dei metodi oggetto ES5. Ricorda, la pratica fa la perfezione, quindi non esitare a sperimentare con questi metodi nel tuo codice. Buon coding, futuri maestri di JavaScript!

Credits: Image by storyset