JavaScript Object.defineProperty()

Définition et utilisation

Object.defineProperty() La méthode est utilisée pour ajouter ou modifier les propriétés de l'objet.

Object.defineProperty() La méthode permet de modifier les métadonnées des attributs.

Object.defineProperty() La méthode permet d'ajouter des getter et des setter.

Méthodes associées :

Object.defineProperty() Ajoute ou modifie une propriété.

Object.defineProperties() Ajoute ou modifie plusieurs propriétés.

Object.getOwnPropertyNames() Renvoie tous les noms de propriétés de l'objet.

Object.getOwnPropertyDescriptor() Renvoie la description de la propriété.

Object.getOwnPropertyDescriptors() Renvoie les descriptions des propriétés de l'objet.

Instance

Exemple 1

Ajout de propriété :

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Ajout d'une nouvelle propriété
Object.defineProperty(person, "year", {value:"2008"});

Essayez-le vous-même

Exemple 2

Modification de l'attribut :

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Modifier une propriété
Object.defineProperty(person, "language", {value:"NO"});

Essayez-le vous-même

Exemple 3

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modifier une propriété
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// Enumérer les propriétés
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// Affichage de l'attribut
document.getElementById("demo").innerHTML = txt;

Essayez-le vous-même

Exemple 4

Le prochain exemple est identique au précédent, mais cache l'attribut language, le rendant non enumerable :

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modifier une propriété
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// Enumérer les propriétés
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Essayez-le vous-même

Exemple 5

Dans cet exemple, un ajusteur et un lecteur sont créés pour s'assurer que la propriété language est mise en majuscules :

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modifier une propriété
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// Modifier language
person.language = "en";
// Afficher language
document.getElementById("demo").innerHTML = person.language;

Essayez-le vous-même

Exemple 6

Dans cet exemple, getteur est utilisé pour joindre firstName et lastName :

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Définir un lecteur
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Essayez-le vous-même

Exemple 7

Les ajusteurs et les lecteurs de JavaScript sont très appropriés pour créer des compteurs :

// Définir les ensembles d'ajusteurs et de lecteurs
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 (value) { this.counter -= value; }
});

Essayez-le vous-même

Syntaxe

Object.defineProperty(object, property, descriptor)

paramètres

Valeur de retour

Support du navigateur

Object.defineProperty() C'est une caractéristique de ECMAScript5 (ES5).

Depuis juillet 2013, tous les navigateurs modernes prennent en charge intégralement ES5 (JavaScript 2009) :