J'ai essayé de comprendre les getters et les setters et ce n'est pas le cas. J'ai lu JavaScript Getters and Setters et Defining Getters and Setters et je ne les comprends pas.
Quelqu'un peut-il dire clairement:
- Ce qu'un getter et un setter sont censés faire, et
- Donnez des exemples TRÈS simples?
javascript
setter
getter
Alexandre Abakumov
la source
la source
a = setValue(5);
para = 5;
etsetValue()
seriez ainsi appelé sous le capot pour faire ce que vous voulez.Réponses:
En plus de la réponse de @ millimoose , les setters peuvent également être utilisés pour mettre à jour d'autres valeurs.
Maintenant, vous pouvez définir
fullName
etfirst
etlast
sera mis à jour et vice versa.la source
Object.defineProperty
fonction qui peut définir les getters et les setters.this.__defineGetter__
ou la nouvelleObject.defineProperty
fonction.Name.prototype.constructor
? Cela semble être une mauvaise alternative à la réponse de millimoose .Getters et Setters en JavaScript
Aperçu
Les getters et les setters en JavaScript sont utilisés pour définir des propriétés calculées ou des accesseurs . Une propriété calculée est une propriété qui utilise une fonction pour obtenir ou définir une valeur d'objet. La théorie de base fait quelque chose comme ceci:
Ceci est utile pour faire automatiquement des choses en arrière-plan lors de l'accès à une propriété, comme garder des nombres dans la plage, reformater des chaînes, déclencher des événements de valeur a changé, mettre à jour des données relationnelles, donner accès à des propriétés privées, etc.
Les exemples ci-dessous montrent la syntaxe de base, bien qu'ils obtiennent et définissent simplement la valeur d'objet interne sans rien faire de spécial. Dans des cas réels, vous modifieriez la valeur d'entrée et / ou de sortie en fonction de vos besoins, comme indiqué ci-dessus.
obtenir / définir des mots clés
ECMAScript 5 prend en charge
get
etset
mots - clés pour définir les propriétés calculées. Ils fonctionnent avec tous les navigateurs modernes sauf IE 8 et les versions antérieures.Getters et Setters personnalisés
get
etset
ne sont pas des mots réservés, ils peuvent donc être surchargés pour créer vos propres fonctions de propriétés personnalisées et calculées entre navigateurs. Cela fonctionnera dans n'importe quel navigateur.Ou pour une approche plus compacte, une seule fonction peut être utilisée.
Évitez de faire quelque chose comme ça, ce qui peut entraîner un gonflement du code.
Pour les exemples ci-dessus, les noms de propriétés internes sont abstraits avec un trait de soulignement afin de décourager les utilisateurs de simplement faire
foo.bar
contrefoo.get( 'bar' )
et obtenir une valeur "non cuite". Vous pouvez utiliser du code conditionnel pour faire différentes choses en fonction du nom de la propriété en cours d'accès (via lename
paramètre).Object.defineProperty ()
L'utilisation
Object.defineProperty()
est une autre façon d'ajouter des getters et des setters, et peut être utilisée sur des objets après leur définition. Il peut également être utilisé pour définir des comportements configurables et énumérables. Cette syntaxe fonctionne également avec IE 8, mais malheureusement uniquement sur les objets DOM.__defineGetter __ ()
Enfin,
__defineGetter__()
est une autre option. Il est obsolète, mais toujours largement utilisé sur le Web et donc peu susceptible de disparaître de sitôt. Il fonctionne sur tous les navigateurs sauf IE 10 et les versions antérieures. Bien que les autres options fonctionnent également bien sur les non-IE, celle-ci n'est donc pas si utile.Il convient également de noter que dans ces derniers exemples, les noms internes doivent être différents des noms des accesseurs pour éviter la récursivité (c'est-à-dire,
foo.bar
appelerfoo.get(bar)
appelerfoo.bar
appelerfoo.get(bar)
...).Voir également
MDN get , set , Object.defineProperty () , __defineGetter __ () , __defineSetter __ ()
MSDN IE8 Getter Support
la source
this[ '_' + name ] = value;
pourrait êtrethis[ '_' + name ] = arguments[1];
et il n'y aurait pas besoin de spécifiervalue
arg.var foo = { bar : 123, get bar(){ return bar; }, set bar( value ){ this.bar = value; } }; foo.bar = 456;
déclenche une exception: Uncaught RangeError: Taille maximale de la pile d'appels dépassée à Object.set bar [as bar] (<anonymous>: 4: 32) at Object.set bar [as bar] (<anonymous>: 4: 32 ) à Object.set bar [as bar] (<anonymous>: 4: 32) at Object.set bar [as bar] (<anonymous>: 4: 32) at Object.set bar [as bar] (<anonymous> : 4: 32) à Object.set bar [as bar] (<anonymous>: 4: 32)bar: 123
etthis.bar = value
etc., changez-les_bar
par exemple. Voir: hongkiat.com/blog/getters-setters-javascript_foo
oumFoo
. Si c'est le même que le getter / setter, cela provoquera une boucle infinie en raison de la récursivité puis un Stack Overflow ™ ;-) car quand vous dites a = b, il appelle a.get (b) qui lui-même appelle a = b , qui appelle a.get (b), ...Vous les utiliseriez par exemple pour implémenter des propriétés calculées.
Par exemple:
(CodePen)
la source
Object.defineProperties
.Désolé de ressusciter une vieille question, mais j'ai pensé que je pourrais apporter quelques exemples très basiques et des explications pour les nuls. Aucune des autres réponses publiées jusqu'ici n'illustre la syntaxe comme le premier exemple du guide MDN , qui est à peu près aussi basique que possible.
Getter:
... se connectera
John Smith
, bien sûr. Un getter se comporte comme une propriété d'objet variable, mais offre la flexibilité d'une fonction pour calculer sa valeur renvoyée à la volée. C'est fondamentalement un moyen sophistiqué de créer une fonction qui ne nécessite pas () lors de l'appel.Setter:
... se connectera
New York
à la console. Comme les getters, les setters sont appelés avec la même syntaxe que la définition de la valeur d'une propriété d'objet, mais sont encore une autre façon sophistiquée d'appeler une fonction sans ().Voir ce jsfiddle pour un exemple plus complet, peut-être plus pratique. La transmission de valeurs au setter de l'objet déclenche la création ou le remplissage d'autres éléments d'objet. Plus précisément, dans l'exemple jsfiddle, la transmission d'un tableau de nombres invite le poseur à calculer la moyenne, la médiane, le mode et la plage; définit ensuite les propriétés d'objet pour chaque résultat.
la source
maps.roll
comme propriété plutôt que comme valeur demaps.roll()
retour. C'est juste une préférence.maps.roll()
Les getters et les setters n'ont vraiment de sens que lorsque vous avez des propriétés privées de classes. Étant donné que Javascript n'a pas vraiment de propriétés de classe privées comme vous le pensez normalement dans les langages orientés objet, cela peut être difficile à comprendre. Voici un exemple d'objet compteur privé. La bonne chose à propos de cet objet est que la variable interne "count" n'est pas accessible depuis l'extérieur de l'objet.
Si vous êtes toujours confus, jetez un œil à l'article de Crockford sur les membres privés en Javascript .
la source
var baz = foo.bar
à avoir un ensemble complet de comportements cachés derrière. Je voudrais attendre à ce que defoo.getBar()
cependant.Je pense que le premier article auquel vous créez un lien le dit assez clairement:
Le but ici est d'encapsuler et de faire abstraction des champs en ne leur permettant d'accéder qu'à une méthode
get()
ouset()
. De cette façon, vous pouvez stocker le champ / les données en interne comme vous le souhaitez, mais les composants extérieurs ne sont que loin de votre interface publiée. Cela vous permet d'effectuer des modifications internes sans modifier les interfaces externes, de faire une validation ou une vérification des erreurs dans laset()
méthode, etc.la source
Bien que nous soyons souvent habitués à voir des objets avec des propriétés publiques sans aucun contrôle d'accès, JavaScript nous permet de décrire avec précision les propriétés. En fait, nous pouvons utiliser des descripteurs pour contrôler comment une propriété est accessible et quelle logique nous pouvons lui appliquer. Prenons l'exemple suivant:
Le résultat final:
la source
Ce qui est si déroutant à ce sujet ... les getters sont des fonctions qui sont appelées lorsque vous obtenez une propriété, des setters, lorsque vous la définissez. exemple, si vous faites
Vous définissez la propriété prop, si vous utilisez des getters / setters, alors la fonction setter sera appelée, avec "abc" comme argument. La définition de la fonction setter à l'intérieur de l'objet ressemblerait idéalement à quelque chose comme ceci:
Je ne sais pas si cela est bien implémenté dans les navigateurs. Il semble que Firefox a également une syntaxe alternative, avec des méthodes spéciales («magiques») à double soulignement. Comme d'habitude, Internet Explorer ne prend en charge rien de tout cela.
la source
Vous pouvez définir une méthode d'instance pour la classe js, via le prototype du constructeur.
Voici l'exemple de code:
Et, cela devrait fonctionner pour n'importe quel navigateur, vous pouvez également simplement utiliser nodejs pour exécuter ce code.
la source
J'ai également été quelque peu déconcerté par l' explication que j'ai lue , car j'essayais d'ajouter une propriété à un prototype existant que je n'avais pas écrit, alors le remplacement du prototype semblait être la mauvaise approche. Donc, pour la postérité, voici comment j'ai ajouté une
last
propriété àArray
:Jamais si légèrement plus agréable que d'ajouter une fonction IMHO.
la source
Si vous faites référence au concept des accesseurs, le but simple est de masquer le stockage sous-jacent de toute manipulation arbitraire. Le mécanisme le plus extrême pour cela est
Si vous faites référence à la fonctionnalité réelle de lecture / définition JS, par exemple.
defineGetter
/defineSetter
, ou{ get Foo() { /* code */ } }
alors il convient de noter que dans la plupart des moteurs modernes, l'utilisation ultérieure de ces propriétés sera beaucoup plus lente qu'elle ne le serait autrement. par exemple. comparer les performances decontre.
la source
J'en ai un pour vous les gars qui est peut-être un peu moche, mais cela se fait sur toutes les plateformes
de cette façon, quand tu appelles
Si vous voulez vraiment pimenter les choses ... vous pouvez insérer un type de chèque:
ou devenez encore plus fou avec le code avancé de typeof check: type.of () sur codingforums.com
la source