Guide ultime pour Getters et Setters en JavaScript
Getters et les setters sont des fonctions ou des méthodes utilisées pour obtenir et ensemble les valeurs des variables. Le concept de getter-setter est commun en programmation informatique: presque tous les langages de programmation de haut niveau sont livrés avec un ensemble de syntaxes permettant d'implémenter des getters et des setters, y compris JavaScipt.
Dans cet article, 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 évoquée en conjonction avec encapsulation. L'encapsulation peut être compris de deux manières.
Tout d’abord, c’est la mise en place du données-getters-setters trio 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. effectué sur les données avant de sauvegarder ou de regarder it-getters et setters fournissent la maison parfaite pour cela.
Deuxièmement, il existe une définition plus stricte selon laquelle l’encapsulation est effectuée pour masquer les données, pour le rendre inaccessible depuis un autre code, sauf par les accesseurs et les setters. De cette façon nous ne finissons pas écraser accidentellement des données importantes avec un autre code dans le programme.
Créer des getters et des setters
1. Avec des méthodes
Depuis les getters et les setters sont essentiellement des fonctions que chercher / changer une valeur, il y a plus d'un moyen pour les créer et 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 plus simple pour créer des getters et des 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
Un plus “officiel” et robuste pour créer des getters et des setters est d’utiliser le obtenir et ensemble mots clés.
À créer un getter, placer le obtenir mot-clé devant une déclaration de fonction qui servira de méthode getter et utilisera le ensemble mot-clé de la même manière à créer un passeur. 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 = 'hello'; console.log (obj.foo); // "Bonjour"
Notez que les données ne peuvent être que stocké sous un nom de propriété (fooVal) c'est différent à partir du nom des méthodes getter-setter (foo) car une propriété contenant le getter-setter ne peut pas contenir les données ainsi que.
Quel est le meilleur chemin?
Si vous choisissez de créer des getters et des setters avec des mots-clés, vous pouvez utiliser le opérateur d'affectation pour définir les données et le opérateur de points pour obtenir les données, de la même manière que vous accédez / définissez la valeur d'une propriété standard.
Cependant, si vous choisissez le premier moyen de coder les getters et les setters, vous devez appeler les méthodes setter et getter. en utilisant la syntaxe d'appel de fonction car ce sont des fonctions typiques (rien de spécial comme celles créées avec le obtenir et ensemble mots clés).
En outre, il y a une chance que vous pourriez vous retrouver accidentellement attribuer une autre valeur aux propriétés qui ont tenu ces méthodes getter-setter et les perdre complètement! Quelque chose dont vous ne devez pas vous soucier plus tard.
Donc, vous pouvez voir pourquoi j'ai dit le la deuxième technique est plus robuste.
Prévention d'écrasement
Si pour une raison quelconque vous préférez la première technique, définissez les propriétés contenant les méthodes getter-setter lecture seulement en les créant en utilisant Object.defineProperties. Propriétés créées via Object.defineProperties, Object.defineProperty et Reflect.defineProperty configurer automatiquement à accessible en écriture: faux ce qui signifie lecture seulement:
/ * Prévention de l'écrasement * / var obj = foo: 'c'est la valeur de foo'; Object.defineProperties (obj, 'getFoo': value: function () return 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 de getters et setters
Une fois que vous avez présenté les getters et les setters, vous pouvez continuer et effectuer des opérations sur les données avant de le changer ou de le retourner.
Dans le code ci-dessous, dans la fonction getter, les données sont concaténé avec une ficelle avant d'être renvoyé, et dans la fonction setter une validation de si la valeur est un nombre ou non est effectué avant la mise à jour n.
var obj = n: 67, get id () return 'L'ID est:' + this.n; , set 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 = 'hello'; console.log (obj.id); // "L'ID est: 893"
Protégez vos données avec des accesseurs et des setters
Jusqu'ici, nous avons abordé l'utilisation de getters et de setters dans le premier contexte de l'encapsulation. Passons à la seconde, c'est-à-dire comment masquer les données du code extérieur avec l'aide de getters et setters.
Données non protégées
La configuration des getters et des 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, c'est changé directement sans toucher les 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 passeur mais directement changé les données (fooVal). Les données que nous avons initialement définies à l'intérieur obj est parti maintenant! Pour éviter cela (accidentellement), vous devez besoin de protection pour vos données. Vous pouvez ajouter que par limiter la portée de l'endroit où vos données sont disponibles. Vous pouvez le faire soit blocage de la portée ou fonction de la portée.
1. Portée du bloc
Une façon est de utiliser une portée de bloc à l'intérieur duquel les données seront définies à l'aide du laisser mot clé qui limite sa portée à ce bloc.
UNE portée du bloc peut être créé en plaçant votre code à l'intérieur d'une paire d'accolades. Chaque fois que vous créez une portée de bloc, assurez-vous de laissez un commentaire dessus, demandant que les accolades soient laissées seules, afin que personne ne enlève les accolades par erreur en pensant qu'ils sont des accolades redondantes supplémentaires dans le code ou ajouter une étiquette à la portée du bloc.
/ * BLOC SCOPE, laissez les accolades en paix! * / let fooVal = 'c'est la valeur de foo'; var obj = get foo () return fooVal; , définissez foo (val) fooVal = val fooVal = 'bonjour'; // ne va pas affecter le fooVal du bloc console.log (obj.foo); // "c'est la valeur de foo"
Changer / créer fooValen dehors du bloc n'affectera pas la fooVal référé à l'intérieur des setters getters.
2. Portée de la fonction
Le moyen le plus courant de protéger les données avec la portée est de: conserver les données à l'intérieur d'une fonction et renvoyer un objet avec les getters et les setters de cette fonction.
function myobj () var fooVal = 'c'est la valeur de foo'; return get foo () return fooVal; , définissez foo (val) fooVal = val fooVal = 'bonjour'; // ne va pas affecter notre objet original var obj = myobj (); console.log (obj.foo); // "c'est la valeur de foo"
L'objet (avec le foo () getter-setter à l'intérieur de celui-ci) retourné par le myobj () la fonction est enregistré dans obj, et alors obj est utilisé pour appeler le getter et le setter.
3. Protection des données sans portée
Il existe également un autre moyen de protéger vos données contre l'écrasement. sans limiter sa portée. La logique sous-jacente est la suivante: comment modifier une donnée si vous ne savez pas comment?
Si les données ont un nom de variable / propriété difficilement reproductible, les chances sont que personne (même nous-mêmes) finira par l'écraser en attribuant une valeur à ce nom de variable / propriété.
var obj = s89274934764: 'c'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 régler les problèmes. Même si le nom que j’ai choisi n’est pas très bon, vous pouvez aussi utiliser des valeurs ou des symboles aléatoires pour créer des noms de propriété comme proposé par Derick Bailey dans cet article de blog. L'objectif principal est de garder les données cachées depuis un autre code et laissez une paire getter-setter l’accéder / la mettre à jour.
Quand devriez-vous utiliser des getters et des setters?
Vient maintenant la grande question: commencez-vous à assigner des getters et des setters à toutes vos données à présent?
Si vous êtes cacher des données, alors il y a Pas d'autre choix.
Mais si vos données sont vues par un autre code, vous avez toujours besoin d'utiliser des getters setters juste pour le grouper avec du code qui effectue des opérations dessus? Je dirais Oui. Code ajoute très vite. Création de micro unités de données individuelles avec son propre getter-setter vous procure une certaine indépendance pour travailler sur ces données sans affecter d'autres parties du code.
