2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								---
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								id: 587d7db2367417b2b2512b89
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								title: Use a Mixin to Add Common Behavior Between Unrelated Objects
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								challengeType: 1
							 
						 
					
						
							
								
									
										
										
										
											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 >