Accesseurs d'objets JavaScript
Getters et Setters en JavaScript
Les getters et setters vous permettent de définir des accesseurs d'objets (propriétés calculées).
Getter JavaScript (le mot-clé get)
Cet exemple utilise une propriété lang pour obtenir la valeur de la propriété language .
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Afficher les données de l'objet en utilisant un getter :
document.getElementById("demo").innerHTML = person.lang; Setter JavaScript (le mot-clé set)
Cet exemple utilise une propriété lang pour définir la valeur de la propriété language .
Exemple
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Définir une propriété d'objet en utilisant un setter :
person.lang = "en";
// Afficher les données de l'objet :
document.getElementById("demo").innerHTML = person.language; Fonction ou Getter en JavaScript ?
Quelles sont les différences entre ces deux exemples ?
Exemple 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Afficher les données de l'objet en utilisant une méthode :
document.getElementById("demo").innerHTML = person.fullName(); Exemple 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// Afficher les données de l'objet en utilisant un getter :
document.getElementById("demo").innerHTML = person.fullName; L'exemple 1 accède à fullName en tant que fonction : person.fullName().
L'exemple 2 accède à fullName en tant que propriété : person.fullName.
Le deuxième exemple fournit une syntaxe plus simple.
Qualité des données
JavaScript peut garantir une meilleure qualité des données lors de l'utilisation de getters et setters.
Dans cet exemple, en utilisant la propriété lang , on renvoie la valeur de la propriété language en majuscules :
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Afficher les données de l'objet en utilisant un getter :
document.getElementById("demo").innerHTML = person.lang; Dans cet exemple, en utilisant la propriété lang , on stocke une valeur en majuscules dans la propriété language :
Exemple
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Définir une propriété d'objet en utilisant un setter :
person.lang = "en";
// Afficher les données de l'objet :
document.getElementById("demo").innerHTML = person.language; Pourquoi utiliser des Getters et Setters ?
- Cela offre une syntaxe plus simple
- Cela permet une syntaxe uniforme pour les propriétés et les méthodes
- Cela peut garantir une meilleure qualité des données
- C'est utile pour effectuer des opérations en arrière-plan
Object.defineProperty()
La méthode Object.defineProperty() peut également être utilisée pour ajouter des getters et setters :
Un exemple de compteur
// Définir l'objet
const obj = {counter : 0};
// Définir les setters et getters
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;}
});
// Jouer avec le compteur :
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
En savoir plus :
Définitions d'objets JavaScript
Constructeurs d'objets JavaScript
Déstructuration d'objets JavaScript
Prototypes d'objets JavaScript
Itérations d'objets JavaScript
Getters & Setters d'objets JavaScript