Accesseurs d'objet 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 une lang
propriété pour get
la valeur de la language
propriété.
Exemple
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
Setter JavaScript (le mot-clé set)
Cet exemple utilise une lang
propriété pour set
la valeur de la language
propriété.
Exemple
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
Fonction JavaScript ou getter ?
Quelle est la différence entre ces deux exemples ?
Exemple 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
Exemple 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
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.
L'utilisation de la lang
propriété, dans cet exemple, renvoie la valeur de la language
propriété en majuscule :
Exemple
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
L'utilisation de la lang
propriété, dans cet exemple, stocke une valeur majuscule dans la language
propriété :
Exemple
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
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()
La Object.defineProperty()
méthode peut également être utilisée pour ajouter des Getters et des Setters :
Un contre-exemple
// Define object
const obj = {counter : 0};
// Define setters
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;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;