JavaScript Getter et Setter (avec exemples)

Dans ce didacticiel, vous découvrirez les méthodes de lecture et de définition JavaScript à l'aide d'exemples.

En JavaScript, il existe deux types de propriétés d'objet:

  • Propriétés des données
  • Propriétés de l'accesseur

Propriété des données

Voici un exemple de propriété de données que nous avons utilisée dans les didacticiels précédents.

 const student = ( // data property firstName: 'Monica'; );

Propriété d'accesseur

En JavaScript, les propriétés des accesseurs sont des méthodes qui obtiennent ou définissent la valeur d'un objet. Pour cela, nous utilisons ces deux mots-clés:

  • get - pour définir une méthode getter pour obtenir la valeur de la propriété
  • set - pour définir une méthode de setter pour définir la valeur de la propriété

JavaScript Getter

En JavaScript, les méthodes getter sont utilisées pour accéder aux propriétés d'un objet. Par exemple,

 const student = ( // data property firstName: 'Monica', // accessor property(getter) get getName() ( return this.firstName; ) ); // accessing data property console.log(student.firstName); // Monica // accessing getter methods console.log(student.getName); // Monica // trying to access as a method console.log(student.getName()); // error

Dans le programme ci-dessus, une méthode getter getName()est créée pour accéder à la propriété d'un objet.

 get getName() ( return this.firstName; )

Remarque: pour créer une méthode getter, le getmot clé est utilisé.

Et aussi lors de l'accès à la valeur, nous accédons à la valeur en tant que propriété.

 student.getName;

Lorsque vous essayez d'accéder à la valeur en tant que méthode, une erreur se produit.

 console.log(student.getName()); // error

Setter JavaScript

En JavaScript, les méthodes setter sont utilisées pour modifier les valeurs d'un objet. Par exemple,

 const student = ( firstName: 'Monica', //accessor property(setter) set changeName(newName) ( this.firstName = newName; ) ); console.log(student.firstName); // Monica // change(set) object property using a setter student.changeName = 'Sarah'; console.log(student.firstName); // Sarah

Dans l'exemple ci-dessus, la méthode setter est utilisée pour changer la valeur d'un objet.

 set changeName(newName) ( this.firstName = newName; )

Remarque: pour créer une méthode setter, le setmot-clé est utilisé.

Comme indiqué dans le programme ci-dessus, la valeur de firstNameest Monica.

Ensuite, la valeur devient Sarah.

 student.chageName = 'Sarah';

Remarque : le Setter doit avoir exactement un paramètre formel.

JavaScript Object.defineProperty ()

En JavaScript, vous pouvez également utiliser la Object.defineProperty()méthode pour ajouter des getters et des setters. Par exemple,

 const student = ( firstName: 'Monica' ) // getting property Object.defineProperty(student, "getName", ( get : function () ( return this.firstName; ) )); // setting property Object.defineProperty(student, "changeName", ( set : function (value) ( this.firstName = value; ) )); console.log(student.firstName); // Monica // changing the property value student.changeName = 'Sarah'; console.log(student.firstName); // Sarah

Dans l'exemple ci-dessus, Object.defineProperty()est utilisé pour accéder et modifier la propriété d'un objet.

La syntaxe d'utilisation Object.defineProperty()est:

 Object.defineProperty(obj, prop, descriptor)

La Object.defineProperty()méthode prend trois arguments.

  • Le premier argument est le objectName.
  • Le deuxième argument est le nom de la propriété.
  • Le troisième argument est un objet qui décrit la propriété.

Articles intéressants...