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/09-classes/07-mixins/article.md
+10-11Lines changed: 10 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,9 +2,9 @@
2
2
3
3
En JavaScript, nous ne pouvons hériter que d'un seul objet. Il ne peut y avoir qu'un `[[Prototype]]` pour un objet. Et une classe peut étendre qu'une seule autre classe.
4
4
5
-
Mais parfois, cela semble limitant. Par exemple, nous avons une classe `StreetSweeper` et une classe `Bicycle`, et nous voulons faire leur mélange: un `StreetSweepingBicycle`.
5
+
Mais parfois, cela semble limitant. Par exemple, nous avons une classe `StreetSweeper` et une classe `Bicycle`, et nous voulons faire leur mélange: un `StreetSweepingBicycle`.
6
6
7
-
Ou nous avons une classe `User` et une classe `EventEmitter` qui implémente la génération d'événements, et nous aimerions ajouter la fonctionnalité de `EventEmitter` à` User 'afin que nos utilisateurs puissent émettre des événements.
7
+
Ou nous avons une classe `User` et une classe `EventEmitter` qui implémente la génération d'événements, et nous aimerions ajouter la fonctionnalité de `EventEmitter` à`User`afin que nos utilisateurs puissent émettre des événements.
8
8
9
9
Il existe un concept qui peut aider ici, appelé "mixins".
10
10
@@ -16,7 +16,7 @@ En d'autres termes, un *mixin* fournit des méthodes qui implémentent un certai
16
16
17
17
Le moyen le plus simple d'implémenter un mixin en JavaScript est de créer un objet avec des méthodes utiles, de sorte que nous puissions facilement les fusionner dans un prototype de n'importe quelle classe.
18
18
19
-
Par exemple ici, le mixin `sayHiMixin` est utilisé pour ajouter un peu de "discours" à `User`:
19
+
Par exemple ici, le mixin `sayHiMixin` est utilisé pour ajouter un peu de "discours" à `User`:
Il n'y a pas d'héritage, mais une méthode de copie simple. Ainsi, `User` peut hériter d'une autre classe et inclure le mixin pour ajouter les méthodes supplémentaires, comme ceci:
50
+
Il n'y a pas d'héritage, mais une simple copie de méthode. Ainsi, `User` peut hériter d'une autre classe et inclure le mixin pour ajouter les méthodes supplémentaires, comme ceci:
Les mixins peuvent utiliser l'héritage à l'intérieur d'eux-mêmes.
61
61
62
-
Par exemple, ici `sayHiMixin` hérite de `sayMixin`:
62
+
Par exemple, ici `sayHiMixin` hérite de `sayMixin`:
63
63
64
64
```js run
65
65
let sayMixin = {
@@ -97,7 +97,7 @@ new User("Dude").sayHi(); // Hello Dude!
97
97
98
98
Veuillez noter que l’appel à la méthode du parent `super.say()` à partir de `sayHiMixin` (aux lignes étiquetées avec `(*)`) recherche la méthode dans le prototype de ce mixin, pas la classe.
99
99
100
-
Voici le schéma (voir la partie droite):
100
+
Voici le schéma (voir la partie droite):
101
101
102
102

103
103
@@ -112,14 +112,14 @@ Faisons maintenant un mixin concret.
112
112
Une caractéristique importante de nombreux objets de navigateur (par exemple) est qu'ils peuvent générer des événements. Les événements sont un excellent moyen de "diffuser des informations" à tous ceux qui le souhaitent. Faisons donc un mixin qui permet d’ajouter facilement des fonctions relatives aux événements à n’importe quelle classe/objet.
113
113
114
114
- Le mixin fournira une méthode `.trigger(name, [... data])` pour "générer un événement" quand quelque chose d'important lui arrive. L'argument `name` est un nom de l'événement, éventuellement suivi d'arguments supplémentaires avec les données d'événement.
115
-
-Egalement la méthode `.on(name, handler)` qui ajoute la fonction `handler` en tant qu'écouteur aux événements portant le nom donné. Il sera appelé lorsqu’un événement avec le `name` donné se déclenche, et récupérera les arguments de l’appel `.trigger`.
115
+
-Également la méthode `.on(name, handler)` qui ajoute la fonction `handler` en tant qu'écouteur aux événements portant le nom donné. Il sera appelé lorsqu’un événement avec le `name` donné se déclenche, et récupérera les arguments de l’appel `.trigger`.
116
116
- ... Et la méthode `.off(name, handler)` qui supprime le programme d'écoute `handler`.
117
117
118
118
Après avoir ajouté le mixin, un objet `user` sera capable de générer un événement `"login"` lorsque le visiteur se connectera. Un autre objet, par exemple, `calendar` peut vouloir écouter de tels événements pour charger le calendrier de la personne connectée.
119
119
120
120
Ou bien, un `menu` peut générer l'événement `"select"` lorsqu'un élément de menu est sélectionné, et d'autres objets peuvent affecter des gestionnaires pour réagir à cet événement. Etc.
121
121
122
-
Voici le code:
122
+
Voici le code:
123
123
124
124
```js run
125
125
let eventMixin = {
@@ -164,12 +164,11 @@ let eventMixin = {
164
164
};
165
165
```
166
166
167
-
168
167
- `.on(eventName, handler)` - assigne la fonction `handler` à exécuter lorsque l'événement portant ce nom se produit. Techniquement, il existe une propriété `_eventHandlers`, qui stocke un tableau de gestionnaires pour chaque nom d'événement, et simplement ajouté à la liste.
169
168
- `.off(eventName, handler)` - supprime la fonction de la liste des gestionnaires.
170
169
- `.trigger(eventName, ... args)` - génère l'événement: tous les gestionnaires de `_eventHandlers[eventName]` sont appelés, avec une liste d'arguments `...args`.
171
170
172
-
Usage:
171
+
Usage:
173
172
174
173
```js run
175
174
// Créez une classe
@@ -199,7 +198,7 @@ Et `eventMixin` mixin facilite l'ajout d'un tel comportement à autant de classe
199
198
200
199
## Résumé
201
200
202
-
*Mixin* -- est un terme générique de programmation orienté objet: une classe contenant des méthodes pour d’autres classes.
201
+
*Mixin* est un terme générique de programmation orienté objet: une classe contenant des méthodes pour d’autres classes.
203
202
204
203
D'autres langages autorisent l'héritage multiple. JavaScript ne prend pas en charge l'héritage multiple, mais les mixins peuvent être implémentés en copiant les méthodes dans le prototype.
0 commit comments