OOPS in JavaScript : Part I

Every one of us knowingly or unknowingly uses OOPS in JavaScript. Every function and every global variable we add in the script is actually a property of window object. The DOM API is also a very powerful API which we extensively use. There are no Classes( in actual sense ) in JavaScript.
But first one should understand why we go for OOPS, two of the main reasons i see are code maintainability and extendability. For instance YUI Library is extensively used by many big sites, the code is getting reused everywhere and libraries like the yui-ext are extending it and taking it to the next level. And thats power... General developer mentality is "i'll do it myself"... Its very natural, but has its side effects of reinventing the wheel again and if we are going to take the same approach i don't think there is a point in reinventing it.... Better would be extend the code that is already there( should be well written and extendable ;-) ) and take it to the next level...
OOPS is intended for greater flexibility and maintainability, that IMO is achievable in JavaScript.

Classes
There are no classes in real sense of the word in JavaScript. Every function, every property( except the native ones like number, string... ) are objects. Any function can be a constructor to the class. All functions are a instance of Function.

/**
 * @class MyClasss
 * @constructor
 * This is my class constructor
 * @param {Object} argument1 first argument for configuring properties of the objects
 */
function MyClass (argument1)
{
    //some constructor code
    this._config = argument1 || {};
}

The properties to the object can be added in run-time. The prototype property determines the initial structure of the object( thats why they call it prototype and it is a property of Function ). But it is a good practice to define all the properties that will be used in the prototype object. Which can be added like this

/**
 * @method MyClass
 * this is my first method
 */
MyClass.prototype.myFunction = function () {
    alert('hello world');
};
/**
 * @type String
 * @property name
 * name of the instance
 */
MyClass.prototype.name = '';
/**
 * @private
 * @type Object
 * @property _config
 * configuration object
 */
MyClass.prototype._config = null; //default value

Here if you notice it is practice and not a must because properties to the objects can be added on the fly thats why all the objects are unique and thats why there are no classes in JavaScript. If you see the above code, the property _config is marked private but it is not actually private. In JavaScript there are no scopes for properties of objects. To put it differently all properties of an object are public.
Whatever has been done so far is just for making the code extendable. There are other approaches to OOP like

var myObj = {}; // one way to create a new instance
//adding method to the object
myObj.myFunction = function () {
    alert('hello world');
};

But the biggest problem with the above approach is it is not extendable.
One can also add static properties to the class.

/**
 * @method MyClass
 * my static method
 * @static
 */
MyClass.myStaticFunction = function () {
    alert('my static function');
};

If you notice closely we are not adding this property to the prototype object but we are adding to the 'MyClass' itself. This is shared across all the instances of the MyClass. The use of 'this' in static methods will refer to MyClass and not the instance and also reference to any other static property via 'this' is not possible. Now that we have created a class-like structure we can now create instances of the MyClass.

//creating a new instance.
var myObj = new MyClass(); 

The 'new' operator creates a new object with the structure of MyClass.prototype and then calls its constructor viz. MyClass. The constructor does some initialization and the object is returned to myObj. In JavaScript objects are passed by reference. Here i am not passing the parameter in the constructor. It is not mandatory to pass the required arguments to any function( including constructor ). The memory will not get released if there are any references to that object.
If you notice carefully we are actually adding properties to the prototype object on the fly. You can access the properties of 'myObj'.

myObj.myFunction();

Tags - sun pvs oops javascript