Object Oriented Javascript

I have been developing software using object oriented technologies since 1993 and I have recently found a way to apply the same techniques to JavaScript. I decided to share some of the techniques that I am using in my day to day work.

I must give credit where credit is due, none of this would be possible without the wonderfull javascript library prototype. Keep in mind that in Javascript there is no support for information hiding or encapsulation but using some of the techniques that I am going to describe you should be able to apply most OO techniques.

First and foremost is inheritance. Without inheritance, you have are forced to duplicate your code in many places (not forced but that seems to be the trend). Lets start with the simplest of examples, the classic shape hierarchy. Suppose you have a shape base class that has one method that is abstract (that is to say it does nothing) ‘getArea’ and you have several sub classes (Circle, Square, Triangle) that are also Shapes.

In java you would write something like this:

public abstract class Shape {
    private final String name;

    public Shape(String name) {
        this.name = name;
    }

    String getName() {
        return this.name;
    }
    abstract double getArea();
}

public class Circle extends Shape {
    public static final int PIE = 3.14;
    private final int r;

    public Circle(int r) {
        super("Circle");
        this.r = r;
    }

    public double getArea() {
        return PIE*this.r*this.r;
    }
}

public class Square extends Shape {
    private final int l;

    public Square(int l) {
        super("Square");
        this.l = l;
    }

    public double getArea() {
        return this.l*this.l;
    }
}

public class Triangle extends Shape {
    private int base;
    private int height;

    public Triangle( int base, int height) {
        super("Triangle");
        this.base = base;
        this.height = height;
    }

    public double getArea() {
        return 0.5d*this.base*this.height;
    }
}

An example usage of the hierarchy is:

Shape[] shapes = {new Circle( 4 ), new Square( 4 ), new Triangle( 3, 6 ) };
for ( int i=0; i <shapes.length(); i++) {
    System.out.println( shapes[i].getName() + " area is " + shapes[i].getArea() );
}

Now for the javascript:

var Shape = Class.create({
    initialize: function( name ) {
        this.name = name;
    },

    getArea : function() {
         throw( "You must implement the getArea method");
    },

    getName: function() {
         return this.name;
    }
});

var PIE = 3.14;
var Circle = Class.create( Shape, {
    initialize: function($super,r) {
        $super('Circle');
        this.r = r;
    },

    getArea: function() {
        return PIE*this.r*this.r;
    }
} );

var Square = Class.create( Shape, {
    initialize: function($super,l) {
        $super('Square');
        this.l = l;
    },

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

var Triangle = Class.create( Shape, {

    initialize: function( $super, base, height) {
        $super('Triangle');
        this.base = base;
        this.height = height;
    },

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

And the usage in javscript

var shapes = [ new Circle(4), new Square(4), new Triangle(3,6) ];
for ( var i=0; i < shapes.length; ++i ) {
    alert( shapes[i].getName() + " area is " + shapes[i].getArea() );
}

As you can see the javascript code and java code are very close to each other. I hope this example helps you make the transition from java to javascript while maintaining many of your object oriented techniques that you have learned over the years.