Gestion des Objets JavaScript


Méthodes de Gestion des Propriétés

// Ajouter ou modifier une propriété d'objet
Object.defineProperty(object, property, descriptor)

// Ajouter ou modifier des propriétés d'objet
Object.defineProperties(object, descriptors)

// Accéder à une Propriété
Object.getOwnPropertyDescriptor(object, property)

// Accéder aux Propriétés
Object.getOwnPropertyDescriptors(object)

// Renvoie toutes les propriétés sous forme de tableau
Object.getOwnPropertyNames(object)

// Accéder au prototype
Object.getPrototypeOf(object)

JavaScript Object.defineProperty()

La méthode Object.defineProperty() peut être utilisée pour :

  • Ajouter une nouvelle propriété à un objet
  • Modifier les valeurs des propriétés
  • Modifier les métadonnées des propriétés
  • Modifier les accesseurs et mutateurs d'objet

Syntaxe :

Object.defineProperty( object, property, descriptor )

Ajouter une Nouvelle Propriété

Cet exemple ajoute une nouvelle propriété à un objet :

Exemple

// Créer un Objet :
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

// Ajouter une Propriété
Object.defineProperty(person, "year", {value:"2008"});
Essayez-le Vous-Même »

Modifier une Valeur de Propriété

Cet exemple modifie une valeur de propriété :

Exemple

// Créer un Objet :
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

// Modifier une Propriété
Object.defineProperty(person, "language", {value : "NO"});
Essayez-le Vous-Même »

Attributs de Propriété

Toutes les propriétés ont un nom et une valeur.

La valeur est l'un des attributs de la propriété.

D'autres attributs incluent : énumérable, configurable et writable.

Ces attributs définissent comment la propriété peut être accédée (est-elle lisible ? est-elle modifiable ?)

En JavaScript, tous les attributs peuvent être lus, mais seul l'attribut de valeur peut être modifié (et seulement si la propriété est writable).

( ECMAScript 5 a des méthodes pour obtenir et définir tous les attributs de propriété)


Modifier les Métadonnées

Les métadonnées de propriété suivantes peuvent être modifiées :

writable : true // La valeur de la propriété peut être modifiée
enumerable : true // La propriété peut être énumérée
configurable : true // La propriété peut être reconfigurée
writable : false // La valeur de la propriété ne peut pas être modifiée
enumerable : false // La propriété ne peut pas être énumérée
configurable : false // La propriété ne peut pas être reconfigurée

Les accesseurs et mutateurs peuvent également être modifiés :

// Définir un accesseur
get: function() { return language }
// Définir un mutateur
set: function(value) { language = value }

Cet exemple rend la langue en lecture seule :

Object.defineProperty(person, "language", {writable:false});

Cet exemple rend la langue non énumérable :

Object.defineProperty(person, "language", {enumerable:false});


JavaScript getOwnPropertyNames()

La méthode Object.getOwnPropertyNames() peut :

  • Lister les propriétés d'objet

Syntaxe

Object.getOwnPropertyNames( object )

Lister toutes les Propriétés d'Objet

Cet exemple obtient toutes les propriétés d'un objet :

Exemple

// Créer un Objet
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

// Obtenir toutes les Propriétés
Object.getOwnPropertyNames(person);
Essayez-le Vous-Même »

Object.getOwnPropertyNames() listera également les propriétés qui ne sont pas énumérables :

Exemple

// Créer un Objet
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

// Définir la Propriété de langue comme non énumérable
Object.defineProperty(person, "language", {enumerable:false});

// Obtenir toutes les Propriétés
Object.getOwnPropertyNames(person);
Essayez-le Vous-Même »

JavaScript Object.keys()

La méthode Object.keys() peut :

  • Lister les propriétés d'objet énumérables

Syntaxe

Object.keys( object )

Lister les Propriétés d'Objet Énumérables

Cet exemple utilise Object.keys() au lieu de Object.getOwnPropertyNames() :

Exemple

// Créer un Objet
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

// Modifier la Propriété "language"
Object.defineProperty(person, "language", {enumerable:false});

// Obtenir toutes les Propriétés Énumérables
Object.keys(person);
Essayez-le Vous-Même »

Remarque

La méthode getOwnPropertyNames() renvoie toutes les propriétés.

La méthode Object.keys() renvoie toutes les propriétés énumérables.

Si vous définissez des propriétés d'objet sans enumerable:false , les deux méthodes renverront la même chose.


Ajouter des Getters et Setters

La méthode Object.defineProperty() peut également être utilisée pour ajouter des Getters et Setters :

Exemple

//Créer un objet
const person = {firstName:"John", lastName:"Doe"};

// Définir un accesseur
Object.defineProperty(person, "fullName", {
get: function () {return this.firstName + " " + this.lastName;}
});
Essayez-le Vous-Même »

Un Exemple de Compteur

Exemple

// Définir l'objet
const obj = {counter:0};

// Définir des mutateurs
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (i) {this.counter -= i;}
});

// Jouer avec le compteur :
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Essayez-le Vous-Même »

Propriétés de Prototype

Les objets JavaScript héritent des propriétés de leur prototype.

Le mot-clé delete ne supprime pas les propriétés héritées, mais si vous supprimez une propriété de prototype, cela affectera tous les objets hérités du prototype.