Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Accesseurs et Mutateurs | Classes
Maîtrise Avancée de JavaScript
course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

2. Manipulation du DOM
3. Événements et Gestion des Événements
4. JavaScript Asynchrone et APIs

book
Accesseurs et Mutateurs

Les accesseurs (getters) et les mutateurs (setters) offrent un moyen puissant de contrôler l'accès aux propriétés d'un objet en JavaScript.

Qu'est-ce que les Getters et Setters ?

En JavaScript, les getters et setters sont des méthodes spéciales qui permettent un accès contrôlé aux propriétés d'un objet. Ils vous offrent la flexibilité de définir comment une propriété est récupérée et modifiée tout en protégeant l'état interne de l'objet.

  • Getter : Une méthode utilisée pour récupérer (get) la valeur d'une propriété ;
  • Setter : Une méthode utilisée pour définir ou mettre à jour la valeur d'une propriété.

Pensez à un coffre-fort de banque. Le coffre contient des objets de valeur (propriétés privées), et le guichetier (getter/setter) agit comme le gardien. Vous ne pouvez pas accéder directement au coffre, mais le guichetier peut récupérer ou mettre à jour des objets pour vous en fonction de certaines règles et validations.

Comment Définir et Utiliser les Getters et Setters

Les getters et setters sont définis à l'aide des mots-clés get et set à l'intérieur d'une classe. Lorsque vous accédez à une propriété, le getter est automatiquement invoqué. De même, lorsque vous modifiez une propriété, le setter est appelé au lieu de modifier directement la propriété.

12345678910111213141516171819202122232425262728293031323334
class Animal { #type; // Private field constructor(name, type) { this.name = name; this.#type = type; // Assigning the private field } // Getter for the type property get type() { return this.#type; } // Setter for the type property set type(newType) { if (newType) { this.#type = newType; } else { console.log('Invalid type'); } } } const lion = new Animal('Lion', 'Wild'); // Using getter to access the private type console.log(lion.type); // Output: Wild // Using setter to modify the private type lion.type = 'Domestic'; console.log(lion.type); // Output: Domestic // Trying to set an invalid value lion.type = ''; // Output: Invalid type
copy

Dans cet exemple, #type est une propriété privée, et nous définissons un getter (get type()) pour récupérer sa valeur et un setter (set type(newType)) pour la modifier. Le setter inclut une validation pour empêcher la définition d'une valeur invalide, démontrant comment vous pouvez contrôler les mises à jour des données privées.

Avantages des Getters et Setters

Accès Contrôlé

  • Les getters vous permettent de définir comment la valeur d'une propriété est accédée, vous permettant de traiter ou de manipuler la valeur avant de la retourner ;
  • Les setters vous donnent le contrôle sur la façon dont une propriété est mise à jour, vous permettant de valider ou de transformer les données avant de les attribuer à un champ privé.

Protection des Données

  • L'utilisation de getters et setters aide à protéger l'état interne d'un objet en fournissant une interface contrôlée pour l'interaction ;
  • Les propriétés privées peuvent rester cachées, et vous pouvez exposer uniquement les informations nécessaires au code externe.

Flexibilité

Les getters et setters vous permettent d'ajouter une logique supplémentaire—comme la validation ou la journalisation—lors de l'accès ou de la modification des propriétés sans altérer la façon dont le code externe interagit avec l'objet.

Exemple : Compte Utilisateur avec Validation de Mot de Passe

Imaginez que vous gérez des comptes utilisateurs où les mots de passe doivent répondre à certaines normes de sécurité. En utilisant un setter, vous pouvez imposer la robustesse du mot de passe, tandis qu'un getter pourrait récupérer une version masquée du mot de passe à des fins d'affichage.

12345678910111213141516171819202122232425262728293031323334
class UserAccount { #password; // Private field constructor(username, password) { this.username = username; this.#password = password; } // Getter for password (returning a masked version) get password() { return '*'.repeat(this.#password.length); // Mask the password when retrieved } // Setter for password with validation set password(newPassword) { if (newPassword.length >= 8) { this.#password = newPassword; } else { console.log('Password must be at least 8 characters long'); } } } const user = new UserAccount('nick_feather', 'secret123'); // Accessing the password using the getter (masked) console.log(user.password); // Output: ********* // Setting a new valid password using the setter user.password = 'strongPassword123'; console.log(user.password); // Output: *************** // Trying to set an invalid password user.password = '123'; // Output: Password must be at least 8 characters long
copy

Dans cet exemple, le getter retourne une version masquée du mot de passe pour cacher la valeur réelle, et le setter impose une validation du mot de passe, garantissant que le mot de passe comporte au moins 8 caractères.

Exemple avec logique de validation utilisant les getters et setters

Voici un autre exemple où nous gérons l'âge d'une personne et nous assurons que la valeur reste dans une plage raisonnable :

12345678910111213141516171819202122232425262728293031323334
class Person { #age; // Private field constructor(name, age) { this.name = name; this.#age = age; } // Getter for age get age() { return this.#age; } // Setter for age with validation set age(newAge) { if (newAge > 0 && newAge < 120) { this.#age = newAge; } else { console.log('Invalid age'); } } } const peter = new Person('Peter', 30); // Accessing the age using the getter console.log(peter.age); // Output: 30 // Setting a new valid age using the setter peter.age = 35; console.log(peter.age); // Output: 35 // Trying to set an invalid age peter.age = 150; // Output: Invalid age
copy

Cet exemple démontre comment un setter peut s'assurer qu'un âge reste dans une plage valide, empêchant ainsi le stockage de données invalides.

1. Quel est le but principal de l'utilisation des getters ?

2. Dans le code suivant, que va afficher console.log(user.password); ?

Quel est le but principal de l'utilisation des getters ?

Quel est le but principal de l'utilisation des getters ?

Sélectionnez la réponse correcte

Dans le code suivant, que va afficher `console.log(user.password);` ?

Dans le code suivant, que va afficher console.log(user.password); ?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 9
We're sorry to hear that something went wrong. What happened?
some-alt