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/08-prototypes/01-prototype-inheritance/article.md
+21-21Lines changed: 21 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,22 @@
1
-
# Héritage prototypique
1
+
# Héritage prototypal
2
2
3
3
En programmation, nous voulons souvent prendre quelque chose et l’étendre.
4
4
5
5
Par exemple, nous avons un objet `user` avec ses propriétés et méthodes et souhaitons en faire des variantes `admin` et `guest` légèrement modifiées. Nous aimerions réutiliser ce que nous avons dans `user`, et non pas copier/réimplémenter ses méthodes, mais simplement créer un nouvel objet par-dessus.
6
6
7
-
*L'héritage prototypique* est une fonctionnalité de langage qui aide à cela.
7
+
*L'héritage prototypal* est une fonctionnalité de langage qui aide à cela.
8
8
9
9
## [[Prototype]]
10
10
11
-
En JavaScript, les objets ont une propriété cachée spéciale `[[Prototype]]` (comme indiqué dans la spécification), qui est soit `null` ou fait référence à un autre objet. Cet objet s'appelle "un prototype":
11
+
En JavaScript, les objets ont une propriété cachée spéciale `[[Prototype]]` (comme indiqué dans la spécification), qui est soit `null` ou fait référence à un autre objet. Cet objet s'appelle "un prototype":
12
12
13
13

14
14
15
-
Le prototype est un peu "magique". Lorsque nous voulons lire une propriété de `object`, et qu'elle en manque, JavaScript la prend automatiquement à partir du prototype. En programmation, cela s'appelle "l'héritage prototypique". De nombreuses fonctionnalités et techniques de programmation intéressantes sont basées sur elle.
15
+
Le prototype est un peu "magique". Lorsque nous voulons lire une propriété de `object`, et qu'elle en manque, JavaScript la prend automatiquement à partir du prototype. En programmation, cela s'appelle "l'héritage prototypal". De nombreuses fonctionnalités et techniques de programmation intéressantes sont basées sur elle.
16
16
17
17
La propriété `[[Prototype]]` est interne et cachée, mais il y a plusieurs façons de la définir.
18
18
19
-
L'un d'eux consiste à utiliser `__proto__`, comme ceci:
19
+
L'un d'eux consiste à utiliser `__proto__`, comme ceci:
Ici, la ligne `(*)` définit `animal` pour être un prototype de` lapin`.
66
66
67
-
Ensuite, lorsque `alert` essaie de lire la propriété `rabbit.eats``(**)`, ce n'est pas dans `rabbit`, donc JavaScript suit la référence `[[Prototype]]` et la trouve dans `animal` (regarde de bas en haut):
67
+
Ensuite, lorsque `alert` essaie de lire la propriété `rabbit.eats``(**)`, ce n'est pas dans `rabbit`, donc JavaScript suit la référence `[[Prototype]]` et la trouve dans `animal` (regarde de bas en haut):
68
68
69
69

70
70
71
-
Ici, nous pouvons dire que "`animal` est le prototype de `rabbit`" ou que "`rabit` hérite de manière prototypique de `animal`".
71
+
Ici, nous pouvons dire que "`animal` est le prototype de `rabbit`" ou que "`rabit` hérite de manière prototypal de `animal`".
72
72
73
73
Donc, si `animal` a beaucoup de propriétés et de méthodes utiles, elles deviennent automatiquement disponibles dans `rabbit`. De telles propriétés sont appelées "héritées".
74
74
75
-
Si nous avons une méthode dans `animal`, elle peut être appelée sur `rabbit`:
75
+
Si nous avons une méthode dans `animal`, elle peut être appelée sur `rabbit`:
76
76
77
77
```js run
78
78
let animal = {
@@ -95,11 +95,11 @@ rabbit.walk(); // Animal walk
95
95
*/!*
96
96
```
97
97
98
-
La méthode est automatiquement prise à partir du prototype, comme ceci:
98
+
La méthode est automatiquement prise à partir du prototype, comme ceci:
99
99
100
100

101
101
102
-
La chaîne de prototypes peut être plus longue:
102
+
La chaîne de prototypes peut être plus longue:
103
103
104
104
```js run
105
105
let animal = {
@@ -130,7 +130,7 @@ alert(longEar.jumps); // true (de rabbit)
130
130
131
131

132
132
133
-
Il n'y a que deux limitations:
133
+
Il n'y a que deux limitations:
134
134
135
135
1. Les références ne peuvent pas tourner en rond. JavaScript va générer une erreur si nous essayons d'assigner `__proto__` dans un cercle.
136
136
2. La valeur de `__proto__` peut être un objet ou `null`. Les autres types sont ignorés.
@@ -143,7 +143,7 @@ Le prototype n'est utilisé que pour la lecture des propriétés.
143
143
144
144
Les opérations d'écriture/suppression fonctionnent directement avec l'objet.
145
145
146
-
Dans l'exemple ci-dessous, nous affectons sa propre méthode `walk` à `rabbit`:
146
+
Dans l'exemple ci-dessous, nous affectons sa propre méthode `walk` à `rabbit`:
147
147
148
148
```js run
149
149
let animal = {
@@ -166,13 +166,13 @@ rabbit.walk = function() {
166
166
rabbit.walk(); // Rabbit! Bounce-bounce!
167
167
```
168
168
169
-
A partir de maintenant, l'appel `rabbit.walk()` trouve la méthode immédiatement dans l'objet et l'exécute, sans utiliser le prototype:
169
+
A partir de maintenant, l'appel `rabbit.walk()` trouve la méthode immédiatement dans l'objet et l'exécute, sans utiliser le prototype:
170
170
171
171

172
172
173
173
Les propriétés d'accesseur constituent une exception, car l'affectation est gérée par une fonction mutateur. Donc, écrire dans une telle propriété revient en fait à appeler une fonction.
174
174
175
-
Pour cette raison, `admin.fullName` fonctionne correctement dans le code ci-dessous:
175
+
Pour cette raison, `admin.fullName` fonctionne correctement dans le code ci-dessous:
176
176
177
177
```js run
178
178
let user = {
@@ -203,7 +203,7 @@ Ici dans la ligne `(*)` la propriété `admin.fullName` a un accesseur dans le p
203
203
204
204
## La valeur de "this"
205
205
206
-
Une question intéressante peut se poser dans l'exemple ci-dessus: quelle est la valeur de `this` dans `set fullName(value)`? Où les propriétés `this.name` et `this.surname` sont écrites: dans `user` ou `admin`?
206
+
Une question intéressante peut se poser dans l'exemple ci-dessus: quelle est la valeur de `this` dans `set fullName(value)`? Où les propriétés `this.name` et `this.surname` sont écrites: dans `user` ou `admin`?
207
207
208
208
La réponse est simple: `this` n'est pas du tout affecté par les prototypes.
209
209
@@ -215,7 +215,7 @@ C'est en fait une chose très importante, car nous pouvons avoir un gros objet a
215
215
216
216
Par exemple, ici `animal` représente un "stockage de méthode" et `rabbit` en fait usage.
217
217
218
-
L'appel `rabbit.sleep()` définit `this.isSleeping` sur l'objet `rabbit`:
218
+
L'appel `rabbit.sleep()` définit `this.isSleeping` sur l'objet `rabbit`:
alert(animal.isSleeping); // undefined (aucune propriété de ce type dans le prototype)
243
243
```
244
244
245
-
L'image résultante:
245
+
L'image résultante:
246
246
247
247

248
248
@@ -254,7 +254,7 @@ En conséquence, les méthodes sont partagées, mais pas l'état d'objet.
254
254
255
255
La boucle `for..in` boucle aussi sur les propriétés héritées.
256
256
257
-
Par exemple:
257
+
Par exemple:
258
258
259
259
```js run
260
260
let animal = {
@@ -279,7 +279,7 @@ for(let prop in rabbit) alert(prop); // jumps, puis eats
279
279
280
280
Si ce n'est pas ce que nous voulons et que nous aimerions exclure les propriétés héritées, il existe une méthode intégrée [obj.hasOwnProperty(key)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty): il renvoie `true` si `obj` a sa propre propriété (non héritée) nommée `key`.
281
281
282
-
Nous pouvons donc filtrer les propriétés héritées (ou faire autre chose avec elles):
282
+
Nous pouvons donc filtrer les propriétés héritées (ou faire autre chose avec elles):
283
283
284
284
```js run
285
285
let animal = {
@@ -295,14 +295,14 @@ for(let prop in rabbit) {
295
295
let isOwn =rabbit.hasOwnProperty(prop);
296
296
297
297
if (isOwn) {
298
-
alert(`Our: ${prop}`); // Our: jumps
298
+
alert(`Our: ${prop}`); // Our: jumps
299
299
} else {
300
300
alert(`Inherited: ${prop}`); // Inherited: eats
301
301
}
302
302
}
303
303
```
304
304
305
-
Nous avons ici la chaîne d'héritage suivante: `rabbit` hérite de `animal`, qui lui hérite de `Object.prototype` (car `animal` est un objet littéral `{...}`, donc c'est par défaut), puis `null` au-dessus:
305
+
Nous avons ici la chaîne d'héritage suivante: `rabbit` hérite de `animal`, qui lui hérite de `Object.prototype` (car `animal` est un objet littéral `{...}`, donc c'est par défaut), puis `null` au-dessus:
0 commit comments