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
In JavaScript we can only inherit from a single object. There can be only one`[[Prototype]]` for an object. And a class may extend only one other class.
3
+
I JavaScript kan vi kun nedarve fra et enkelt objekt. Der kan kun være en`[[Prototype]]` for et objekt. Og en klasse kan kun udvide en anden klasse.
4
4
5
-
But sometimes that feels limiting. For instance, we have a class`StreetSweeper`and a class`Bicycle`, and want to make their mix: a`StreetSweepingBicycle`.
5
+
Men nogle gange føles det begrænset. For eksempel har vi en klasse`StreetSweeper`og en klasse`Bicycle`, og vi vil lave deres kombination: en`StreetSweepingBicycle`.
6
6
7
-
Or we have a class`User`and a class`EventEmitter`that implements event generation, and we'd like to add the functionality of `EventEmitter`to`User`, so that our users can emit events.
7
+
Eller vi har en klasse`User`og en klasse`EventEmitter`som implementerer oprettelse af begivenheder, og vi vil gerne tilføje funktionaliteten af `EventEmitter`til`User`, så vores brugere kan sende begivenheder.
8
8
9
-
There's a concept that can help here, called "mixins".
9
+
Der er et koncept der kan hjælpe her, kaldet "mixins".
10
10
11
-
As defined in Wikipedia, a[mixin](https://en.wikipedia.org/wiki/Mixin)is a class containing methods that can be used by other classes without a need to inherit from it.
11
+
Fra Wikipedia står der, at[mixin](https://en.wikipedia.org/wiki/Mixin)er en klasse der indeholder metoder, der kan bruges af andre klasser uden at skulle nedarve fra den.
12
12
13
-
In other words, a*mixin*provides methods that implement a certain behavior, but we do not use it alone, we use it to add the behavior to other classes.
13
+
Med andre ord, en*mixin*leverer metoder, der implementerer en bestemt adfærd, men vi bruger den ikke alene, vi bruger den til at tilføje adfærd til andre klasser.
14
14
15
-
## A mixin example
15
+
## Et mixin eksempel
16
16
17
-
The simplest way to implement a mixin in JavaScript is to make an object with useful methods, so that we can easily merge them into a prototype of any class.
17
+
Den nemmeste måde at implementere en mixin i JavaScript er at lave et objekt med et par nyttige metoder, som vi så nemt kan flette dem ind i en prototype af enhver klasse.
18
18
19
-
For instance here the mixin `sayHiMixin`is used to add some "speech" for `User`:
19
+
Her er for eksempel en mixin kaldet `sayHiMixin`der kan bruges til at tilføje noget "tale" for klassen`User`:
20
20
21
21
```js run
22
22
*!*
23
23
// mixin
24
24
*/!*
25
25
let sayHiMixin = {
26
26
sayHi() {
27
-
alert(`Hello${this.name}`);
27
+
alert(`Hej,${this.name}!`);
28
28
},
29
29
sayBye() {
30
-
alert(`Bye${this.name}`);
30
+
alert(`Farvel,${this.name}!`);
31
31
}
32
32
};
33
33
@@ -40,14 +40,14 @@ class User {
40
40
}
41
41
}
42
42
43
-
//copy the methods
43
+
//kopier metoderne
44
44
Object.assign(User.prototype, sayHiMixin);
45
45
46
-
//now User can say hi
47
-
newUser("Dude").sayHi(); //Hello Dude!
46
+
//nu kan User sige hej
47
+
newUser("Karsten").sayHi(); //Hej, Karsten!
48
48
```
49
49
50
-
There's no inheritance, but a simple method copying. So`User`may inherit from another class and also include the mixin to "mix-in" the additional methods, like this:
50
+
Der er ingen nedarvning - kun simpel kopiering af metoder. Så`User`kan nedarve fra en anden klasse og også inkludere mixin'en for at "mikse" de yderligere metoder, som dette:
51
51
52
52
```js
53
53
classUserextendsPerson {
@@ -57,9 +57,9 @@ class User extends Person {
57
57
Object.assign(User.prototype, sayHiMixin);
58
58
```
59
59
60
-
Mixins can make use of inheritance inside themselves.
60
+
Mixins kan gøre brug af nedarvning inden i sig selv.
61
61
62
-
For instance, here `sayHiMixin`inherits from`sayMixin`:
62
+
For eksempel, her nedarver `sayHiMixin`fra`sayMixin`:
63
63
64
64
```js run
65
65
let sayMixin = {
@@ -69,16 +69,16 @@ let sayMixin = {
69
69
};
70
70
71
71
let sayHiMixin = {
72
-
__proto__: sayMixin, // (or we could use Object.setPrototypeOf to set the prototype here)
72
+
__proto__: sayMixin, // (eller vi kan bruge Object.setPrototypeOf til at sætte prototype her)
73
73
74
74
sayHi() {
75
75
*!*
76
-
//call parent method
76
+
//kald forældermetoden
77
77
*/!*
78
-
super.say(`Hello${this.name}`); // (*)
78
+
super.say(`Hej${this.name}`); // (*)
79
79
},
80
80
sayBye() {
81
-
super.say(`Bye${this.name}`); // (*)
81
+
super.say(`Farvel${this.name}`); // (*)
82
82
}
83
83
};
84
84
@@ -88,43 +88,43 @@ class User {
88
88
}
89
89
}
90
90
91
-
//copy the methods
91
+
//kopier metoderne
92
92
Object.assign(User.prototype, sayHiMixin);
93
93
94
-
//now User can say hi
95
-
newUser("Dude").sayHi(); //Hello Dude!
94
+
//nu kan User sige hej
95
+
newUser("Karsten").sayHi(); //Hej, Karsten!
96
96
```
97
97
98
-
Please note that the call to the parent method `super.say()`from`sayHiMixin` (at lines labelled with`(*)`) looks for the method in the prototype of that mixin, not the class.
98
+
Bemærk at kaldet til forældremetoden `super.say()`fra`sayHiMixin` (på linjer mærket med`(*)`) leder efter metoden i prototypen for den mixin, ikke klassen.
99
99
100
-
Here's the diagram (see the right part):
100
+
Her er et diagram over det (se den højre del):
101
101
102
102
103
103
104
-
That's because methods `sayHi`and`sayBye`were initially created in`sayHiMixin`. So even though they got copied, their `[[HomeObject]]`internal property references`sayHiMixin`, as shown in the picture above.
104
+
Det er fordi metoderne `sayHi`og`sayBye`indledningsvis blev oprettet i`sayHiMixin`. Så selvom de blev kopieret, henviser deres `[[HomeObject]]`interne egenskab til`sayHiMixin`, som vist i billedet ovenfor.
105
105
106
-
As`super`looks for parent methods in `[[HomeObject]].[[Prototype]]`, that means it searches`sayHiMixin.[[Prototype]]`.
106
+
Da`super`leder efter forældremetoder i `[[HomeObject]].[[Prototype]]`, betyder det, at det søger i`sayHiMixin.[[Prototype]]`.
107
107
108
108
## EventMixin
109
109
110
-
Now let's make a mixin for real life.
110
+
Lad os nu oprette en mixin der bruges i virkeligheden.
111
111
112
-
An important feature of many browser objects (for instance) is that they can generate events. Events are a great way to "broadcast information" to anyone who wants it. So let's make a mixin that allows us to easily add event-related functions to any class/object.
112
+
En vigtig mulighed for mange browserobjekter (for eksempel) er, at de kan generere hændelser. Hændelser er en fantastisk måde at "kommunisere information" til enhver, der ønsker det. Så lad os lave en mixin, der gør det nemt at tilføje event-relaterede funktioner til enhver klasse/objekt.
113
113
114
-
-The mixin will provide a method`.trigger(name, [...data])`to "generate an event" when something important happens to it. The `name` argument is a name of the event, optionally followed by additional arguments with event data.
115
-
-Also the method `.on(name, handler)`that adds `handler` function as the listener to events with the given name. It will be called when an event with the given`name`triggers, and get the arguments from the`.trigger` call.
116
-
- ...And the method`.off(name, handler)`that removes the `handler` listener.
114
+
-Denne mixin vil tilbyde en metode`.trigger(name, [...data])`til at "generere en hændelse" når noget vigtigt sker med den. `name`-argumentet er et navn på hændelsen. Det næste argument er valgfrit og giver mulighed for at sende data med hændelsen.
115
+
-Metoden `.on(name, handler)`tilføjer `handler`-funktionen som lytter til hændelser med det givne navn. Den vil blive kaldt når en hændelse med det givne`name`udløses, og får argumenterne fra kaldet til`.trigger`.
116
+
- ...Endelig er der`.off(name, handler)`som fjerner `handler`-lytteren.
117
117
118
-
After adding the mixin, an object `user`will be able to generate an event `"login"`when the visitor logs in. And another object, say, `calendar`may want to listen for such events to load the calendar for the logged-in person.
118
+
Efter at have tilføjet mixin'en, vil et objekt `user`være i stand til at generere en hændelse `"login"`når en besøgende logger ind. Et andet objekt, for eksempel `calendar`kan lytte efter sådan en hændelse for at indlæse kalenderen for den person der er logget ind.
119
119
120
-
Or, a`menu` can generate the event `"select"`when a menu item is selected, and other objects may assign handlers to react on that event. And so on.
120
+
Eller en`menu`, kan generere hændelsen `"select"`når et menu-element er valgt, og andre objekter kan tildele funktioner (kaldet handlers) til at reagere på hændelsen. Og så videre.
121
121
122
-
Here's the code:
122
+
Her er koden til sådan en mixin:
123
123
124
124
```js run
125
125
let eventMixin = {
126
126
/**
127
-
* Subscribe to event, usage:
127
+
* Abonner på en hændelse, brug:
128
128
* menu.on('select', function(item) { ... }
129
129
*/
130
130
on(eventName, handler) {
@@ -136,7 +136,7 @@ let eventMixin = {
136
136
},
137
137
138
138
/**
139
-
* Cancel the subscription, usage:
139
+
* Annuller abonnering, brug:
140
140
* menu.off('select', handler)
141
141
*/
142
142
off(eventName, handler) {
@@ -150,59 +150,59 @@ let eventMixin = {
150
150
},
151
151
152
152
/**
153
-
* Generate an event with the given name and data
153
+
* Opret en hændelse med det givne navn og data
154
154
* this.trigger('select', data1, data2);
155
155
*/
156
156
trigger(eventName, ...args) {
157
157
if (!this._eventHandlers?.[eventName]) {
158
-
return; //no handlers for that event name
158
+
return; //ingen handlers der abonnerer på den hændelse
- `.on(eventName, handler)` -- assigns function`handler`to run when the event with that name occurs. Technically, there's an `_eventHandlers` property that stores an array of handlers for each event name, and it just adds it to the list.
169
-
- `.off(eventName, handler)` -- removes the function from the handlers list.
170
-
- `.trigger(eventName, ...args)` -- generates the event: all handlers from`_eventHandlers[eventName]`are called, with a list of arguments`...args`.
168
+
- `.on(eventName, handler)` -- tildeler funktionen`handler`opgaven at køre når en hændelse med det givne navn opstår. Teknisk set, er der en `_eventHandlers`-egenskab, der gemmer en liste af handlers for hvert hændelsesnavn, og den tilføjer bare funktionen til listen.
169
+
- `.off(eventName, handler)` -- fjerner funktionen fra handler-listen.
170
+
- `.trigger(eventName, ...args)` -- genererer hændelsen: alle handlers fra`_eventHandlers[eventName]`kaldes med en liste af argumenter`...args`.
//triggers the event => the handler above runs and shows:
192
-
//Value selected: 123
191
+
//trigger en hændelse => handleren ovenfor kører og viser:
192
+
//Valgte værdi: 123
193
193
menu.choose("123");
194
194
```
195
195
196
-
Now, if we'd like any code to react to a menu selection, we can listen for it with`menu.on(...)`.
196
+
Nu, hvis vi vil have kode til at reagere på et menuvalg, kan vi lytte efter det med`menu.on(...)`.
197
197
198
-
And `eventMixin` mixin makes it easy to add such behavior to as many classes as we'd like, without interfering with the inheritance chain.
198
+
Derudover gør `eventMixin` mixin nemt at tilføje sådan adfærd til så mange klasser som vi ønsker, uden at påvirke arvekæden.
199
199
200
-
## Summary
200
+
## Opsummering
201
201
202
-
*Mixin* -- is a generic object-oriented programming term: a class that contains methods for other classes.
202
+
*Mixin* -- er en generisk objektorienteret programmeringsterm: en klasse, der indeholder metoder for andre klasser.
203
203
204
-
Some other languages allow multiple inheritance. JavaScript does not support multiple inheritance, but mixins can be implemented by copying methods into prototype.
204
+
Nogle andre sprog tillader nedarvning fra flere klasser. Det gør JavaScript ikke, men mixins kan implementere noget der minder om det ved at kopiere metoder ind i en prototype.
205
205
206
-
We can use mixins as a way to augment a class by adding multiple behaviors, like event-handling as we have seen above.
206
+
Vi kan bruge mixins som en måde at udvide en klasses adfærd, som f. eks. event-handling som vi har set ovenfor.
207
207
208
-
Mixins may become a point of conflict if they accidentally overwrite existing class methods. So generally one should think well about the naming methods of a mixin, to minimize the probability of that happening.
208
+
Mixins kan blive et problem, hvis de tilfældigt overskriver eksisterende klassemetoder. Så det er en god idé at tænke godt over navngivningen af metoderne i en mixin, for at minimere sandsynligheden for, at det sker.
0 commit comments