Easy inheritance in JavaScript

JavaScript inheritance is cumbersome. You have a constructor function and it has a prototype. And inheritance is done by setting the prototype to a newly created parent object? What? That means that you better not do anything in the constructor, otherwise you'll have a royal pain deriving new prototypes from it.

So I did what I do and wrote my own inheritance system, based on mixins. It still functions pretty much like the JavaScript system, but is more convenient for building the constructor and the prototype from existing classes.

Here's the infamous OO geometry demo:

Rectangle = Klass({
  initialize : function(w, h) {
    this.w = w;
    this.h = h;
  },

  getArea : function() {
    return this.w * this.h;
  }
})


Square = Klass(Rectangle, {
  initialize : function(s) {
    Rectangle.initialize.call(this, s, s);
  }
})


Moving = Klass({
  mass : 1,

  initialize : function(n) {
    this.s = new Array(n);
    this.a = new Array(n);
    this.v = new Array(n);
    this.f = new Array(n);
    for (var i=0; i<n; i++){ 
      this.s[i] = this.a[i] = this.v[i] = this.f[i] = 0;
    }
  },

  move : function(t) {
    for (var i=0; i<this.s.length; i++) {
      var a = this.a[i], s = this.s[i], v = this.v[i], f = this.f[i];
      var newA = f/this.mass;
      var newV = v + a*t + (1/2)*(newA-a)*t*t;
      var newS = s + v*t + (1/2)*a*t*t + (1/3)*(newA-a)*t*t*t;
      this.a[i] = newA;
      this.v[i] = newV;
      this.s[i] = newS;
    }
    this.previousMass = this.mass;
  }
})


Printable = {
  valueString : function() {
    var a = [];
    for (var i in this)
      if (typeof this[i] != 'function') a.push(i);
    a.sort();
    for (var i=0; i<a.length; i++)
      a[i] = a[i] + ": " + this[a[i]];
    return a.join(", ");
  },

  print : function() {
    console.log(this.valueString());
  }
}


MovingRectangle = Klass(Rectangle, Moving, Printable, {
  density : 0.19,
  height : 1,
  initialize : function(w,h,d) {
    Rectangle.initialize.call(this,w,h);
    Moving.initialize.call(this,2);
    if (d)
      this.density = d;
    this.mass = this.getVolume() * this.density;
  },

  getVolume : function() {
    return this.getArea() * this.height;
  }
})

Klass is a function that builds a constructor. The returned constructor calls its prototype's initialize method.

The constructor's prototype is built by merging together all the arguments given in the Klass call. If an argument has a prototype property defined, the prototype is used for merging. Otherwise the argument is merged as itself.

The built prototype is then finally merged into the constructor function, so that you have access to the prototype functions and properties from the constructor object itself. Which is useful for doing calls to other classes, as you can do e.g. Parent.someMethod.call(this) instead of Parent.prototype.someMethod.call(this).

Klass = function() {
  var c = function() {
    this.initialize.apply(this, arguments);
  }
  c.ancestors = toArray(arguments);
  c.prototype = {};
  for(var i = 0; i<arguments.length; i++) {
    var a = arguments[i];
    if (a.prototype) {
      Object.extend(c.prototype, a.prototype);
    } else {
      Object.extend(c.prototype, a);
    }
  }
  Object.extend(c, c.prototype);
  return c;
}

Object.extend merges the src object's attributes with the dst object, ignoring errors. Ignoring the errors is useful in merging native objects (e.g. styles) as they've got some stuff that can't be overridden.

Object.extend = function(dst, src) {
  for (var i in src) {
    try{ dst[i] = src[i]; } catch(e) {}
  }
  return dst;
}

toArray creates a new array from an object that has a length property. Useful for dealing with all the silly Array-like objects such as the function arguments object and the lists returned by the DOM API.

toArray = function(obj) {
  var a = new Array(obj.length);
  for (var i=0; i<obj.length; i++)
    a[i] = obj[i];
  return a;
}