Class Constructors in JavaScript



JSThis is the sixth in a series of articles on object-oriented JavaScript. So far, we've looked at different methods of creating objects and classes in JavaScript, looked at object & static fields & methods, and discussed how to handle making those fields either public or privately accessible. Let's see how we can create class constructors.


A constructor is a block of code that's called when an object is instantiated. It's usually used to initialize settings in the object. Let's take a look at the code example we've been using in this series to date:
function PointObject(x, y)
{
    /* Fields */
    var x;
    var y;

    /* Methods */
    var getX;
    var getY;

    getX = function()
    {
        return (this.x);
    };

    getY = function()
    {
        return (this.y);
    };

    // Constructor Code Runs Here
    this.x = x;
    this.y = y;

    return ({
        getX:getX,
        getY:getY
    });
}

You'll see in the example above that the function is executed when an object is instantiated, so any code inside that function (as opposed to code encapsulated inside the methods) runs as if it was in a constructor. This is hardly ideal though-since variables declared at the function level are exposed to all inner functions (methods). This violates a tenet of object-oriented programming, encapsulation. In the example, variables that only need to be local to a constructor are instead global to the entire class (the same as class-level fields).
The best way to fix this is to use a specific method as the constructor, and instead call that from the inside the class. Unfortunately, the word constructor is a reserved word in JavaScript, so for the purpose of this example, we'll use the word init. See below:
function PointObject(PointX, PointY)
{
    /* Fields */
    var x;
    var y;

    /* Constructor */
    var init;

    /* Methods */
    var getX;
    var getY;

    init = function()
    {
        x = PointX;
        y = PointY;
    };

    getX = function()
    {
        return (x);
    };

    getY = function()
    {
        return (y);
    };

    // Constructor Code Runs Here
    init();

    return ({
        getX:getX,
        getY:getY
    });
}

In the above example, we call the init function as the sole line of JavaScript(outside of field and method declarations) at the class level. The actual initialization code goes inside the init method. Also notice how we don't return the init method so it can't be called explicitly-it can only be called from outside of the class during object initialization.
While this is better, its not perfect. Astute readers will note that technically the init() is the equivalent of a private method and thus could be called from any other method of the class. Also, we still have a slight encapsulation leakage-parameters passed into the function (to be used by the constructor) are still available to other methods, when in reality we'd like them to be local to the constructor.
This wraps up our look at creating constructors in JavaScript. Next time, we'll take a look at using namespaces.