Accesseurs JavaScript
Accesseurs JavaScript (Getters et Setters)
ECMAScript 5 (ES5 2009) a introduit Getter et Setters.
Les getters et les setters vous permettent de définir des accesseurs d’objet (propriétés calculées).
JavaScript Getter (Le mot-clé get)
Cet exemple utilise un lang propriété à get
la valeur de la language propriété.
Exemple
// Crée un objet :
const personne = {
prénom : “John”,
nom: “Biche”,
langue : “en”,
obtenir lang() {
retourne cette.langue ;
}
} ;
// Affiche les données de l’objet à l’aide d’un getter :
document.getElementById(“démo”).innerHTML = personne.lang;
Essayez-le vous-même »
Setter JavaScript (le mot-clé set)
Cet exemple utilise un lang propriété à set
la valeur de la language propriété.
Exemple
const personne = {
prénom : “John”,
nom: “Biche”,
langue: “”,
définir lang(lang) {
this.langue = lang;
}
} ;
// Définit une propriété d’objet à l’aide d’un setter :
personne.lang = “fr”;
// Affiche les données de l’objet :
document.getElementById(“démo”).innerHTML = personne.langue;
Essayez-le vous-même »
Fonction JavaScript ou getter ?
Quelle est la différence entre ces deux exemples ?
Exemple 1
const personne = {
prénom : “John”,
nom: “Biche”,
nomcomplet : fonction() {
retourne this.firstName + ” ” + this.lastName ;
}
} ;
// Affiche les données de l’objet à l’aide d’une méthode :
document.getElementById(“demo”).innerHTML = person.fullName();
Essayez-le vous-même »
Exemple 2
const personne = {
prénom : “John”,
nom: “Biche”,
obtenir nomcomplet() {
retourne this.firstName + ” ” + this.lastName ;
}
} ;
// Affiche les données de l’objet à l’aide d’un getter :
document.getElementById(“demo”).innerHTML = person.fullName;
Essayez-le vous-même »
Exemple 1 accéder à fullName en tant que fonction : person.fullName().
Exemple 2 accès 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 de setters.
En utilisant le lang propriété, dans cet exemple, renvoie la valeur de la propriété language propriété en majuscule :
Exemple
// Crée un objet :
const personne = {
prénom : “John”,
nom: “Biche”,
langue : “en”,
obtenir lang() {
return this.language.toUpperCase();
}
} ;
// Affiche les données de l’objet à l’aide d’un getter :
document.getElementById(“démo”).innerHTML = personne.lang;
Essayez-le vous-même »
En utilisant le lang propriété, dans cet exemple, stocke une valeur majuscule dans la language propriété:
Exemple
const personne = {
prénom : “John”,
nom: “Biche”,
langue: “”,
définir lang(lang) {
this.language = lang.toUpperCase();
}
} ;
// Définit une propriété d’objet à l’aide d’un setter :
personne.lang = “fr”;
// Affiche les données de l’objet :
document.getElementById(“démo”).innerHTML = personne.langue;
Essayez-le vous-même »
Pourquoi utiliser des getters et des setters ?
- Il donne une syntaxe plus simple
- Il permet une syntaxe égale pour les propriétés et les méthodes
- Il peut garantir une meilleure qualité des données
- C’est utile pour faire des choses en coulisses
Objet.defineProperty()
Le Object.defineProperty() peut également être utilisée pour ajouter des Getters et des Setters :
Un contre-exemple
// Définir l’objet
const obj = {compteur : 0} ;
// Définir les setters et les getters
Objet.defineProperty(obj, “réinitialiser”, {
obtenir : fonction () {this.counter = 0;}
});
Object.defineProperty(obj, “incrément”, {
obtenir : fonction () {this.counter++;}
});
Object.defineProperty(obj, “décrémenter”, {
get : fonction () {this.counter–;}
});
Objet.defineProperty(obj, “ajouter”, {
set : fonction (valeur) {this.counter += valeur ;}
});
Object.defineProperty(obj, “soustraire”, {
set : fonction (valeur) {this.counter -= valeur ;}
});
// Jouez avec le compteur :
obj.reset;
obj.add = 5 ;
obj. soustraire = 1 ;
obj.incrément ;
obj.decrement;
Essayez-le vous-même »
#Accesseurs #JavaScript