Ultime Guide des Getters et Setters en JavaScript

Les getters et setters sont des fonctions ou des méthodes utilisées pour obtenir et définir les valeurs des variables . Le concept du getter-setter est commun dans la programmation informatique : presque tous les langages de programmation de haut niveau sont livrés avec un ensemble de syntaxe pour implémenter des getters et setters, y compris JavaScipt.

Dans ce post, nous verrons ce que sont les setters getters, et comment les créer et les utiliser en JavaScript .

Getters-setters et encapsulation

L'idée de getters et setters est toujours mentionnée en conjonction avec l'encapsulation . L'encapsulation peut être comprise de deux manières .

Tout d'abord, c'est la mise en place du trio data-getters-setters pour accéder et modifier ces données. Cette définition est utile lorsque certaines opérations, telles que la validation, doivent être exécutées sur les données avant de les enregistrer ou de les afficher. Les getters et les setters en sont l'hôte idéal.

Deuxièmement, il y a une définition plus stricte selon laquelle l'encapsulation est faite pour cacher des données, pour les rendre inaccessibles à partir d'autres codes, sauf par le biais des getters et setters . De cette façon, nous ne finissons pas par écraser accidentellement des données importantes avec un autre code dans le programme.

Créer des getters et setters

1. Avec des méthodes

Puisque les getters et setters sont essentiellement des fonctions qui récupèrent / modifient une valeur, il existe plusieurs façons de les créer et de les utiliser. La première façon est:

 var obj = {foo: 'c'est la valeur de foo', getFoo: function () {return this.foo; }, setFoo: function (val) {this.foo = val; }} console.log (obj.getFoo ()); // "c'est la valeur de foo" obj.setFoo ('hello'); console.log (obj.getFoo ()); // "Bonjour" 

C'est le moyen le plus simple de créer des getters et setters. Il y a une propriété foo et il y a deux méthodes: getFoo et setFoo à retourner et assigner une valeur à cette propriété.

2. Avec des mots-clés

Une façon plus "officielle" et robuste de créer des getters et setters est d'utiliser les mots-clés get et set .

Pour créer un getter, placez le mot-clé get devant une déclaration de fonction qui servira de méthode getter, et utilisez le mot-clé set de la même manière pour créer un setter . La syntaxe est la suivante:

 var obj = {fooVal: 'c'est la valeur de foo', get foo () {return this.fooVal; }, définissez foo (val) {this.fooVal = val; }} console.log (obj.foo); // "c'est la valeur de foo" obj.foo = 'bonjour'; console.log (obj.foo); // "Bonjour" 

Notez que les données ne peuvent être stockées que sous un nom de propriété ( fooVal ) différent du nom des méthodes getter-setter ( foo ) car une propriété contenant le getter-setter ne peut pas non plus contenir les données .

Quel chemin est le meilleur?

Si vous choisissez de créer des getters et setters avec des mots-clés, vous pouvez utiliser l' opérateur d'affectation pour définir les données et l' opérateur point pour obtenir les données, de la même manière que vous activez / définissez la valeur d'une propriété régulière.

Cependant, si vous choisissez la première façon de coder les getters et setters, vous devez appeler les méthodes setter et getter en utilisant la syntaxe de l'appel de fonction car ce sont des fonctions typiques (rien de spécial comme ceux créés avec les mots clés get et set ).

En outre, il est possible que vous finissiez par assigner accidentellement une autre valeur aux propriétés qui contenaient ces méthodes getter-setter et les perdiez complètement ! Quelque chose dont vous n'avez pas à vous soucier dans la dernière méthode.

Donc, vous pouvez voir pourquoi j'ai dit que la seconde technique est plus robuste .

Prévention d'écrasement

Si, pour une raison quelconque, vous préférez la première technique, faites en sorte que les propriétés qui contiennent les méthodes getter-setter Object.defineProperties lecture seule en les créant à l' aide de Object.defineProperties . Les propriétés créées via Object.defineProperties, Object.defineProperty et Reflect.defineProperty se configurent automatiquement en Reflect.defineProperty writable: false qui signifie en lecture seule :

 / * Prévention d'écrasement * / var obj = {foo: 'c'est la valeur de foo'}; Object.defineProperties (obj, {'getFoo': {valeur: function () {renvoie this.foo;}}, 'setFoo': {valeur: function (val) {this.foo = val;}}}); obj.getFoo = 66; // getFoo ne va pas être écrasé! console.log (obj.getFoo ()); // "c'est la valeur de foo" 

Opérations à l'intérieur des getters et setters

Une fois que vous avez introduit les getters et les setters, vous pouvez aller de l'avant et effectuer des opérations sur les données avant de les changer ou de les retourner.

Dans le code ci-dessous, dans la fonction getter, les données sont concaténées avec une chaîne avant d'être renvoyées, et dans la fonction setter, une validation indiquant si la valeur est un nombre ou non est effectuée avant la mise à jour de n .

 var obj = {n: 67, get id () {return 'L'identifiant est:' + this.n; }, définissez id (val) {if (typeof val === 'nombre') this.n = val; }} console.log (obj.id); // "L'ID est: 67" obj.id = 893; console.log (obj.id); // "L'ID est: 893" obj.id = 'bonjour'; console.log (obj.id); // "L'ID est: 893" 

Protéger les données avec les getters et les setters

Jusqu'à présent, nous avons couvert l'utilisation des getters et setters dans le premier contexte de l'encapsulation. Passons à la seconde, à savoir comment cacher les données du code extérieur à l'aide de getters et setters.

Données non protégées

La mise en place de getters et setters ne signifie pas que les données ne peuvent être consultées et modifiées que via ces méthodes. Dans l'exemple suivant, il est directement modifié sans toucher aux méthodes getter et setter:

 var obj = {fooVal: 'c'est la valeur de foo', get foo () {return this.fooVal; }, définissez foo (val) {this.fooVal = val; }} obj.fooVal = 'Bonjour'; console.log (obj.foo); // "Bonjour" 

Nous n'avons pas utilisé le setter mais directement changé les données ( fooVal ) . Les données que nous avons initialement définies dans obj sont parties maintenant! Pour éviter cela (accidentellement), vous avez besoin d'une protection pour vos données. Vous pouvez ajouter cela en limitant la portée de l'endroit où vos données sont disponibles. Vous pouvez le faire en fonction de la portée du bloc ou de la portée de la fonction .

1. Blocage de la portée

Une façon consiste à utiliser une portée de bloc à l' intérieur de laquelle les données seront définies en utilisant le mot let clé let qui limite sa portée à ce bloc.

Une portée de bloc peut être créée en plaçant votre code à l' intérieur d'une paire d'accolades . Lorsque vous créez une portée de bloc, assurez-vous de laisser un commentaire au-dessus pour demander que les accolades soient laissées seules, de sorte que personne ne supprime les accolades par erreur en pensant qu'il y a des accolades supplémentaires dans le code ou ajouter une étiquette .

 / * BLOC SCOPE, laissez les accolades tout seul! * / {let fooVal = 'c'est la valeur de foo'; var obj = {get foo () {retourne fooVal; }, définissez foo (val) {fooVal = val}}} fooVal = 'bonjour'; // ne va pas affecter le fooVal dans le bloc console.log (obj.foo); // "c'est la valeur de foo" 

Changer / créer fooVal dehors du bloc n'affectera pas le fooVal référé à l'intérieur des setters getters.

2. Portée de la fonction

La façon la plus courante de protéger les données avec la portée est de conserver les données dans une fonction et de renvoyer un objet avec les getters et setters de cette fonction.

 function myobj () {var fooVal = 'c'est la valeur de foo'; return {get foo () {retourne fooVal; }, définissez foo (val) {fooVal = val}}} fooVal = 'bonjour'; // ne va pas affecter notre fooVal var original obj = myobj (); console.log (obj.foo); // "c'est la valeur de foo" 

L'objet (avec le getter-setter foo() intérieur) retourné par la fonction myobj() est sauvegardé dans obj, et obj est utilisé pour appeler le getter et le setter .

3. Protection des données sans portée

Il existe également une autre façon de protéger vos données contre l'écrasement sans en limiter la portée . La logique derrière cela est la suivante: comment pouvez-vous changer une donnée si vous ne savez pas comment elle s'appelle?

Si les données ont un nom de variable / propriété pas si facilement reproductible, il y a de fortes chances que personne (même nous-mêmes) ne finisse par l'écraser en attribuant une valeur à ce nom de variable / propriété.

 var obj = {s89274934764: 'ceci est la valeur de foo', get foo () {return this.s89274934764; }, définissez foo (val) {this.s89274934764 = val; }} console.log (obj.foo); // "c'est la valeur de foo" 

Vous voyez, c'est une façon de faire les choses. Bien que le nom que j'ai choisi ne soit pas vraiment bon, vous pouvez également utiliser des valeurs aléatoires ou des symboles pour créer des noms de propriétés comme le propose Derick Bailey dans ce blog. L'objectif principal est de garder les données cachées des autres codes et de laisser une paire getter-setter pour y accéder / mettre à jour.

Quand devriez-vous utiliser des getters et setters?

Maintenant vient la grande question: commencez-vous à assigner des getters et setters à toutes vos données maintenant?

Si vous cachez des données, il n'y a pas d'autre choix .

Mais si vos données sont bien vues par un autre code, avez-vous encore besoin d'utiliser des setters getters juste pour les regrouper avec du code qui effectue certaines opérations dessus? Je dirais oui . Le code s'additionne très bientôt . La création de micro-unités de données individuelles avec son propre accesseur-poseur vous donne une certaine indépendance pour travailler sur ces données sans affecter d'autres parties du code.

Post-processeurs CSS pour les débutants: conseils et ressources

Le pré-traitement CSS est un concept que la plupart des développeurs Web ont déjà appris ou lu. Nous avons couvert en détail le prétraitement CSS pour aider les développeurs à se familiariser avec cette technologie répandue. Mais qu'en est-il des post-processeurs ?Ces outils relativement nouveaux sont similaires en ce sens qu'ils affectent le flux de travail de développement web, mais ils opèrent de l' autre côté du développement CSS ( développement "post").Dans ce post,

(Conseils techniques et de conception)

Google rend AdSense plus transparent - Voici les nouveautés

Ceux qui comptent sur AdSense de Google sont probablement bien conscients que la plate-forme elle-même n'est pas très ouverte quand il s'agit de traiter des violations. En fait, AdSense a été plutôt tristement célèbre pour avoir extrait toutes les annonces d'un site Web lorsque la page comportait une violation de règle .Cependa

(Conseils techniques et de conception)