JavaScript Mixins

I have just reviewed JavaScript Design Patterns, and I think it is good to mention this.

It is possible to do a mixin class in JavaScript as in Ruby. This is another way to make our code reuse without inheritance. Consider you have a function, and you wish to use in many classes. In practice, you create a class that contains your general-purpose methods, and then use it to augment other classes. Class with these general-purpose methods is called Mixin class. It is generally not instantiated or called directly, instead it exists to provide methods to other classes.


var Mixin = function() {};
Mixin.prototype = {
   serialize: function() {
      var output = [];
      for(key in this) {
         output.push(key + ': ' + this[key]);
      }
      return output.join(', ');
   }
};


This sort of method could potentially be useful in many different types of classes, but it doesn’t make sense to have each of these classes inherit from Mixin. Similarly, duplicating the code in each class doesn’t make much sense either. The best approach is to use the augment function to add this method to each class that needs it:


augment(Author, Mixin);

var author = new Author('Ross Harmes', ['JavaScript Design Patterns']);
var serializedString = author.serialize();


This can be thought of as a way to implement multiple inheritance in JavaScript.


/* Augment function. */
function augment(receivingClass, givingClass) {
   for(methodName in givingClass.prototype) {
      if(!receivingClass.prototype[methodName]) {
         receivingClass.prototype[methodName] = givingClass.prototype[methodName];
      }
   }
}


A more robust augment allows copying one or two of them over to another class.

/* Augment function, improved. */
function augment(receivingClass, givingClass) {
   if(arguments[2]) { // Only give certain methods.
      for(var i = 2, len = arguments.length; i < len; i++) {
         receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
      }
   }
   else { // Give all methods.
      for(methodName in givingClass.prototype) {
         if(!receivingClass.prototype[methodName]) {
            receivingClass.prototype[methodName] = givingClass.prototype[methodName];
         }
      }
   }
}


You can now write augment(Author, Mixin, 'serialize'); to only augment Author with the single serialize method.

In other times, you don't have to need this augment function in order to do Mixins. You could do this by using apply or call method inside constructor function.


var Author = function(name, books) {
   this.name = name || "";
   this.books = books || [];

   Mixin.apply(this);
};


Often it makes more sense to augment a class with a few methods than it does to make
one class inherit from another. This is a lightweight way to prevent code duplication. Unfortunately, there aren’t many situations where it can be used. Only methods general enough to be used in very dissimilar classes make good candidates for sharing (if the classes aren’t that dissimilar, normal inheritance is often a better choice).