Object-oriented programming with JavaScript · September 10, 2012

So, here’s how to easily create your own prototype-based classes in JavaScript. Seems confusing to lots of folks, and there are multiple ways to do it. If you use CoffeeScript, you can write your classes in a more traditional OO style. However, it’s really not too complicated in plain JavaScript.

Step One: Write Your Constructor

A common convention is to capitalize variables that refer to classes that need to be instantiated with the “new” keyword.

var MyClass,
    instance;

MyClass = function () {
    // This is the constructor - do any initialization here!
    // "this" refers to the current instance of the class
    this.instanceVariable = 42;
};

instance = new MyClass();
console.log(instance.instanceVariable);  // 42

Step Two: Write Instance Methods

Available to all instances of the class, even ones created before the method was written!

MyClass.prototype.instanceMethod = function (argument) {
    // "this" refers to the class instance
    this.instanceVariable = argument;
};

instance.instanceMethod("Wut?");

console.log(instance.instanceVariable);  // "Wut?"

Step Two ½: Wrong Way to Write Instance Methods

It can be tempting to write instance methods inside your constructor function, perhaps for style/organizational purposes. However, it’s inefficient to do so, because each method is created every time you create an instance of your class.

// Wrong!
var MyClass = function () {
    this.instanceMethod = function (argument) {
        // "this" refers to the class instance
        this.instanceVariable = argument;
    };
};

Step Three: Write Static Class Methods

These methods can be used without creating an instance of the class. For example, if you’ve ever used the Math object, you’ve used a static method (for example, Math.cos(Math.PI)).

MyClass.staticMethod = function (argument) {
    var results = "Hello " + argument;
    console.log(results);
};

MyClass.staticMethod("World");  // "Hello World"

Step Four: Inheritance

Say I want to create a subclass of the MyClass class. This part is a bit awkward, but doable.

var otherInstance,
    MyOtherClass;

MyOtherClass = function (argument) {
    MyClass.call(this);  // Invokes MyClass's constructor
    this.otherInstanceVariable = argument;
};

// Set up prototype (inheritance) chain
MyOtherClass.prototype = new MyClass();

// Instantiate new object
otherInstance = new MyOtherClass("What?");

console.log(otherInstance.instanceVariable);  // 42 (inherited from MyClass)
console.log(otherInstance.otherInstanceVariable);  // "What?"

otherInstance.instanceMethod("Wut?");  // (inherited from MyClass)
console.log(otherInstance.instanceVariable);  // "Wut?"

// Extend the "instanceMethod" method
MyOtherClass.prototype.instanceMethod = function (argument) {
    MyClass.prototype.instanceMethod.call(this, argument);  // Equivalent of calling "super"
};

Hope that helps get you started. JavaScript is really not a bad little language once you get the hang of it. The fact that it can be run in any browser and accessed with interactive developer consoles makes it an easy language to learn and play around with. It’s also by far the language du jour on the internets, so learning it could have a beneficial effect for your job opportunities!

Add a comment · Posted by in Programming · , ,

Was this post interesting or informative? Help support the Ganbaru Games blog by downloading my apps!