OOP in JavaScript: Class in various Avatars

I have done more JavaScript programming in the last couple of months than I have ever done before, and I have started liking it. I had used JavaScript before, but only for simple use cases like form field validations, alerts or taking simple input. Recently I have been looking at ways to do Object Oriented Programming (OOP) using JavaScript, and what struck me initially odd about it was different forms a function can take and different ways in which you can use them.

Functions can be treated as Class in JavaScript. They can have member variables and methods. I have seen many different ways in which this can be coded

Defining Function as Class

function class1(arg1,arg2)
{
    //this is the constructor
    this.variable1;

    this.method1 = function()
    {
    }
}

Or

var class2 = function(arg1,arg2)
{
    this.method1 = function()
    {
    }
}

Or

var class3 = {}; //or new Object()
class3.method1 = function()
{
}

Or

var class4 = {
    method1 : function ()
    {
    },
    memberVar1,
    memberVar2
};

In the first two cases, you need to instantiate the class e.g.

var class1Instance = new class1("ram", "kulkarni");

In the third and fourth cases the object is already instantiated and you cannot pass constructor arguments.

So when to use each of above form of class/object definition? The first two are almost same, in that they are named functions, they allow you to pass constructor arguments, member variables and methods can be defined in similar ways. However the second case allows you to create global function from inside another function, though I don’t see many use cases of it.

function outerFunction()
{
    innerFunction = function()
    {
      	//this is global function
        //and can be called as innerFunction()
    }

    function innerFunction1()
    {
    //this function cannot be accessed from outside outerFunction
    }
}

Third and fourth cases are like singleton classes, with no constructor. This format (JSON) is good for transferring data. I don’t normally use this format to define classes.

You can create singleton class and instantiate it using syntax in the second case as follows –

var class2 = new function(arg1,arg2)
{
    this.method1 = function()
    {
        alert("In class2.method1");
    }
}

Note the use of ‘new’ just before function keyword. This becomes singleton because anonymous function is instantiated and assigned to a variable. You won’t be able to instantiate class2 (new class2()) because it is an object now.

Prototype property

JavaScript function has ‘prototype’ property which can be used to add methods and member variables to it after the function is defined. So in the first case above if we want to add method2 to function class1, we could do

class1.prototype.method2 = function ()
{
}

Prototype could be used to add methods to built-in classes too, e.g. to String

String.prototype.newStrFunction = function () {
}

Inheritance of classes can be achieved in JavaScript using prototype. I found description in this article very useful to understand how to implement it.

Anonymous Function to hide variables

Anonymous function can be used to hide variables, which otherwise might become global variables. Variables in JavaScript are function scoped, i.e. all variables declared with var keyword inside a function are local to that function, and all other variables are global.
Suppose you are writing a JavaScript library and you have created a separate .js file for it. All variables that you declare in this file outside of any function become global. If you want to avoid this, you can use a wrapper anonymous function –

//content of mylibrary.js
(
function() 	//this is a wrapper anonymous function
		//which will hide all var scoped variables
{
    var v1,
    v2; //all such variables would be hidden
    function func1()
    {
    }
}
)();

Notice ‘()’ at the end; this executes the function immediately after it is defined. If you did not use wrapper function as shown above, variables v1 and v2 will become global, which you may not want.

-Ram Kulkarni