You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/07-object-properties/02-property-accessors/article.md
+48-48Lines changed: 48 additions & 48 deletions
Original file line number
Diff line number
Diff line change
@@ -1,31 +1,31 @@
1
1
2
-
# Property getters and setters
2
+
# Getters et Setters de propriété
3
3
4
-
There are two kinds of object properties.
4
+
Il y a deux sortes de proriétés d'objet.
5
5
6
-
The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties.
6
+
Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisés jusqu'à maintenant étaient des propriétés de données.
7
7
8
-
The second type of property is something new. It's an *accessor property*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
8
+
Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécutent une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur.
9
9
10
-
## Getters and setters
10
+
## Getters et Setters
11
11
12
-
Accessor properties are represented by "getter" and "setter" methods. In an object literal they are denoted by`get`and`set`:
12
+
Les accesseurs de propriétés sont représentés par des méthodes "getter" et "setter". Dans un objet littéral elles se demarquent par`get`et`set`:
13
13
14
14
```js
15
15
let obj = {
16
16
*!*get propName()*/!* {
17
-
//getter, the code executed on getting obj.propName
17
+
//Getter, le code va récupérer obj.propName
18
18
},
19
19
20
20
*!*set propName(value)*/!* {
21
-
//setter, the code executed on setting obj.propName = value
21
+
//Setter, le code va définir obj.propName = value
22
22
}
23
23
};
24
24
```
25
25
26
-
The getter works when`obj.propName`is read, the setter -- when it is assigned.
26
+
Le getter fonctionne quand`obj.propName`est lu, le setter -- quand il s'agit d'une assignation.
27
27
28
-
For instance, we have a `user`object with `name`and`surname`:
28
+
Par exemple, nous avons un objet `user`avec `name`et`surname`:
29
29
30
30
```js
31
31
let user = {
@@ -34,7 +34,7 @@ let user = {
34
34
};
35
35
```
36
36
37
-
Now we want to add a`fullName` property, that should be`"John Smith"`. Of course, we don't want to copy-paste existing information, so we can implement it as an accessor:
37
+
Maintenant nous voulons ajouter une propriété`fullName`, qui devrait être`"John Smith"`. Bien sûr, nous ne voulons pas copier-coller l'information existante, donc nous pouvons implémenter un accesseur :
38
38
39
39
```js run
40
40
let user = {
@@ -53,9 +53,9 @@ alert(user.fullName); // John Smith
53
53
*/!*
54
54
```
55
55
56
-
From the outside, an accessor property looks like a regular one. That's the idea of accessor properties. We don't *call*`user.fullName`as a function, we *read* it normally: the getter runs behind the scenes.
56
+
De l'extérieur, un accesseur de propriété ressemble à une propriété normale. C'est l'idée d'un accesseur. Nous n'*appellons* pas `user.fullName`comme une fonction, nous la *lisons* normalement : le getter agit en arrière plan.
57
57
58
-
As of now, `fullName`has only a getter. If we attempt to assign `user.fullName=`, there will be an error:
58
+
Pour l'instant, `fullName`n'a qu'un getter. Si nous essayons d'assigner `user.fullName=`, il y aura une erreur :
59
59
60
60
```js run
61
61
let user = {
@@ -65,11 +65,12 @@ let user = {
65
65
};
66
66
67
67
*!*
68
-
user.fullName="Test"; //Error (property has only a getter)
68
+
user.fullName="Test"; //Erreur (la propriété n'a qu'un getter)
69
69
*/!*
70
70
```
71
71
72
-
Let's fix it by adding a setter for `user.fullName`:
72
+
Corrigeons cela en ajoutant un setter pour `user.fullName` :
73
+
73
74
74
75
```js run
75
76
let user = {
@@ -87,29 +88,29 @@ let user = {
87
88
*/!*
88
89
};
89
90
90
-
//set fullName is executed with the given value.
91
+
//Le setter est exécuté avec la valeur donnée.
91
92
user.fullName="Alice Cooper";
92
93
93
94
alert(user.name); // Alice
94
95
alert(user.surname); // Cooper
95
96
```
96
97
97
-
As the result, we have a "virtual" property `fullName`. It is readable and writable.
98
+
Comme résultat, nous avons une propriété "virtuelle" `fullName`. Elle est lisible et ecrivable.
98
99
99
-
## Accessor descriptors
100
+
## Descripteurs d'accesseur
100
101
101
-
Descriptors for accessor properties are different from those for data properties.
102
+
Les descripteurs d'accesseur de propriété sont différents de ceux pour les propriété de données.
102
103
103
-
For accessor properties, there is no `value`or`writable`, but instead there are `get`and`set` functions.
104
+
Pour les accesseurs de propriétés, il n'y a pas de `value`ou`writable`, à la place il y a les fonctions `get`et`set`.
104
105
105
-
That is, an accessor descriptor may have:
106
+
Un descripteur d'accesseur peut avoir :
106
107
107
-
-**`get`** -- a function without arguments, that works when a property is read,
108
-
-**`set`** -- a function with one argument, that is called when the property is set,
109
-
-**`enumerable`** -- same as for data properties,
110
-
-**`configurable`** -- same as for data properties.
108
+
-**`get`** -- une fonction sans arguments, pour la lecture de propriété,
109
+
-**`set`** -- une fonction avec un argument, qui fonctionne lorsque la propriété change de valeur,
110
+
-**`enumerable`** -- identique aux propriétés de données
111
+
-**`configurable`** -- identique aux propriétés de données
111
112
112
-
For instance, to create an accessor`fullName`with`defineProperty`, we can pass a descriptor with`get`and`set`:
113
+
Par exemple, pour créer un accesseur`fullName`avec`defineProperty`, on peut passer un descripteur avec`get`et`set`:
113
114
114
115
```js run
115
116
let user = {
@@ -134,13 +135,13 @@ alert(user.fullName); // John Smith
134
135
for(let key in user) alert(key); // name, surname
135
136
```
136
137
137
-
Please note that a property can be either an accessor (has `get/set` methods) or a data property (has a `value`), not both.
138
+
Veuillez notez qu'une propriété peut être soit un accesseur (qui a les méthodes `get/set`) ou une propriété de données (qui a `value`), pas les deux.
138
139
139
-
If we try to supply both `get` and `value`in the same descriptor, there will be an error:
140
+
Si nous essayons de fournir les deux `get` and `value`dans le même descripteur, il y aura une erreur :
Getters/setters can be used as wrappers over "real" property values to gain more control over operations with them.
157
+
Les Getters/setters peuvent être utilisés comme des enveloppes autour des "réelles" valeurs de propriété pour gagner plus de contrôles sur leurs opérations.
157
158
158
-
For instance, if we want to forbid too short names for`user`, we can have a setter `name`and keep the value in a separate property`_name`:
159
+
Par exemple, si nous voulions interdire les noms trop court pour`user`, nous pourrions avoir un setter `name`et garder la valeur dans une propriété séparée`_name`:
159
160
160
161
```js run
161
162
let user = {
@@ -175,19 +176,18 @@ let user = {
175
176
user.name="Pete";
176
177
alert(user.name); // Pete
177
178
178
-
user.name=""; //Name is too short...
179
+
user.name=""; //Le nom est trop court...
179
180
```
180
181
181
-
So, the name is stored in `_name` property, and the access is done via getter and setter.
182
-
183
-
Technically, external code is able to access the name directly by using `user._name`. But there is a widely known convention that properties starting with an underscore `"_"` are internal and should not be touched from outside the object.
182
+
Donc, le nom est stocké dans la propriété `_name`, et l'accés est fait par le getter et le setter.
184
183
184
+
Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y a une convention très connue, selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touchées depuis l'extérieur des objets.
185
185
186
-
## Using for compatibility
186
+
## Utilisation pour la compatibilité
187
187
188
-
One of the great uses of accessors is that they allow to take control over a "regular" data property at any moment by replacing it with a getter and a setter and tweak its behavior.
188
+
Un des avantages de l'utilisation des accesseurs et qu'ils permettent de prendre le contrôle sur un propriété de données "normale" à tout moment, en la remplaçant par un getter et un setter et modifiant son comportement.
189
189
190
-
Imagine we started implementing user objects using data properties `name`and`age`:
190
+
Imaginons que nous commencions des objets utilisateur en utilisant des propriétés de données `name`et`age`:
191
191
192
192
```js
193
193
functionUser(name, age) {
@@ -200,7 +200,7 @@ let john = new User("John", 25);
200
200
alert( john.age ); // 25
201
201
```
202
202
203
-
...But sooner or later, things may change. Instead of `age`we may decide to store`birthday`, because it's more precise and convenient:
203
+
...Mais tôt ou tard, les choses pourraient changer. Au lieu d'`age`on pourrait decider de stocker`birthday`, parce que c'est plus précis et plus pratique :
204
204
205
205
```js
206
206
functionUser(name, birthday) {
@@ -211,21 +211,21 @@ function User(name, birthday) {
211
211
let john =newUser("John", newDate(1992, 6, 1));
212
212
```
213
213
214
-
Now what to do with the old code that still uses`age`property?
214
+
Maintenant que fait-on avec l'ancien code qui utilise toujours la propriété`age` ?
215
215
216
-
We can try to find all such places and fix them, but that takes time and can be hard to do if that code is used by many other people. And besides, `age`is a nice thing to have in`user`, right?
216
+
On peut essayer de trouver tous les endroits où on utilisent `age` et les modifier, mais ça prend du temps et ça peut être compliqué à faire si le code est utilisé par plusieurs personnes. En plus, `age`est une bonne chose à avoir dans`user`, n'est ce pas ?
217
217
218
-
Let's keep it.
218
+
Gardons-le.
219
219
220
-
Adding a getter for`age`solves the problem:
220
+
Ajoutons un getter pour`age`et résolvons le problème :
221
221
222
222
```js run no-beautify
223
223
functionUser(name, birthday) {
224
224
this.name= name;
225
225
this.birthday= birthday;
226
226
227
227
*!*
228
-
// age is calculated from the current date and birthday
228
+
// age est calculé à partir de la date actuelle et de birthday
229
229
Object.defineProperty(this, "age", {
230
230
get() {
231
231
let todayYear =newDate().getFullYear();
@@ -237,8 +237,8 @@ function User(name, birthday) {
237
237
238
238
let john =newUser("John", newDate(1992, 6, 1));
239
239
240
-
alert( john.birthday ); // birthday is available
241
-
alert( john.age ); // ...as well as the age
240
+
alert( john.birthday ); // birthday est disponible
241
+
alert( john.age ); // ...Ainsi que l'age
242
242
```
243
243
244
-
Now the old code works too and we've got a nice additional property.
244
+
Maintenant l'ancien code fonctionne toujours et nous avons une propriété additionnelle.
0 commit comments