2018-09-30 23:01:58 +01:00
---
id: 587d7db2367417b2b2512b89
title: Use a Mixin to Add Common Behavior Between Unrelated Objects
challengeType: 1
2020-05-21 17:31:25 +02:00
isHidden: false
2019-08-05 09:17:33 -07:00
forumTopicId: 301331
2018-09-30 23:01:58 +01:00
---
## Description
< section id = 'description' >
As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like < code > Bird< / code > and < code > Airplane< / code > . They can both fly, but a < code > Bird< / code > is not a type of < code > Airplane< / code > and vice versa.
2019-10-27 15:45:37 -01:00
For unrelated objects, it's better to use < dfn > mixins< / dfn > . A mixin allows other objects to use a collection of functions.
2019-05-17 06:20:30 -07:00
```js
let flyMixin = function(obj) {
obj.fly = function() {
console.log("Flying, wooosh!");
}
};
```
2018-09-30 23:01:58 +01:00
The < code > flyMixin< / code > takes any object and gives it the < code > fly< / code > method.
2019-05-17 06:20:30 -07:00
```js
let bird = {
name: "Donald",
numLegs: 2
};
let plane = {
model: "777",
numPassengers: 524
};
flyMixin(bird);
flyMixin(plane);
```
2018-09-30 23:01:58 +01:00
Here < code > bird< / code > and < code > plane< / code > are passed into < code > flyMixin< / code > , which then assigns the < code > fly< / code > function to each object. Now < code > bird< / code > and < code > plane< / code > can both fly:
2019-05-17 06:20:30 -07:00
```js
bird.fly(); // prints "Flying, wooosh!"
plane.fly(); // prints "Flying, wooosh!"
```
2019-10-27 15:45:37 -01:00
Note how the mixin allows for the same < code > fly< / code > method to be reused by unrelated objects < code > bird< / code > and < code > plane< / code > .
2018-09-30 23:01:58 +01:00
< / section >
## Instructions
< section id = 'instructions' >
2019-10-27 15:45:37 -01:00
Create a mixin named < code > glideMixin< / code > that defines a method named < code > glide< / code > . Then use the < code > glideMixin< / code > to give both < code > bird< / code > and < code > boat< / code > the ability to glide.
2018-09-30 23:01:58 +01:00
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 14:37:37 +01:00
tests:
- text: Your code should declare a < code > glideMixin</ code > variable that is a function.
2019-07-24 02:32:04 -07:00
testString: assert(typeof glideMixin === "function");
2018-10-04 14:37:37 +01:00
- text: Your code should use the < code > glideMixin</ code > on the < code > bird</ code > object to give it the < code > glide</ code > method.
2019-07-24 02:32:04 -07:00
testString: assert(typeof bird.glide === "function");
2018-10-04 14:37:37 +01:00
- text: Your code should use the < code > glideMixin</ code > on the < code > boat</ code > object to give it the < code > glide</ code > method.
2019-07-24 02:32:04 -07:00
testString: assert(typeof boat.glide === "function");
2018-09-30 23:01:58 +01:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'js-seed' >
```js
let bird = {
name: "Donald",
numLegs: 2
};
let boat = {
name: "Warrior",
type: "race-boat"
};
2020-03-08 07:46:28 -07:00
// Only change code below this line
2018-09-30 23:01:58 +01:00
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
let bird = {
name: "Donald",
numLegs: 2
};
let boat = {
name: "Warrior",
type: "race-boat"
};
function glideMixin (obj) {
obj.glide = () => 'Gliding!';
}
glideMixin(bird);
glideMixin(boat);
```
< / section >