A mixin is a set of properties (which can be functions) to add to an existing class (A class is a blueprint for an object). It can be thought of as a sub class with no parent class until it is explicitly assigned to one. They are useful because multiple sets of functionalities can be added to a class without an inheritance heirarchy. Which means mixins can applied to many different unrelated classes.
In JavaScript, classes are implemented as functions (even the new ES6 ones) which are just a specialized type of object. So classes are objects too. In other words objects create objects. Combined with the fact that properties can be added to a class at any point, this makes for a very simple mixin implementation. First here is the class to extend:
function Car(name) { this.name = name; this.currentSpeed = 0; }; Car.prototype.accelerate = function (amount) { this.currentSpeed += amount; }; Car.prototype.brake = function (amount) { this.currentSpeed -= amount; }; var miata = new Car('miata'); miata.accelerate(15); miata.brake(5); console.log(miata); // Car { name: 'miata', currentSpeed: 10 }
var printer = function(obj) { obj.printAllProperties = function() { for (var key in this) { console.log(key + ': ' + this[key]); } } obj.printName = function() { console.log(this.name); } return obj; }; var reset = function(obj) { obj.resetSpeed = function() { this.speed = 0; }; return obj; }; Car.prototype = printer(Car.prototype); Car.prototype = reset(Car.prototype); var miata = new Car('miata'); miata.accelerate(15); miata.brake(5); miata.resetSpeed(); miata.printName(); // miata miata.printAllProperties(); // currentSpeed: 10 // ... the rest of the object ...
So the mixins above are sets of properties defined in a function which just takes an object to add them to. The prototype is the class definition so the mixins are applied directly to the class. The above mixin creation can be simplified with a simple mixin helper function too:
var mixin = function(obj /* mixins... */) { var mixins = Array.prototype.slice.call(1, arguments); mixins.forEach(function(mixin) { obj.prototype = mixin(obj.prototype); }); return obj; }; Car = mixin(Car, printer, reset);
This is slightly modified version of the mixins given by Angus Cross in an old blog post.
Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2016/mixin.js
2087
dailybridgerton
kianamaiart
theartofmadeline
gamechangershow
pixelskylines
titsay
