Learning Javascript OOP I

1. Creating objects using new Object()
   There are several ways to create objects in JavaScript, and all of them have their place. The simplest way is to use the new operator, specifically, new Object() :

   <script language="javascript" type="text/javascript">
   <!--
   
   person = new Object()
   person.name = "Tim Scarfe"
   person.height = "6Ft"
   
   person.run = function() {
   	this.state = "running"
   	this.speed = "4ms^-1"
   }
   
   //-->
   </script>

    We define a custom object "person," then add to it its own properties and method afterwards. In this case, the custom method merely initializes two more properties.

2. Creating objects using Literal Notation
   

   Another inline way of defining an object is via literal notation. Supported in JavaScript1.2 and above, it's a more robust form of creating an object on the fly:
   

   <script language="javascript" type="text/javascript">
   <!--
   
   // Object Literals
   
   timObject = {
   	property1 : "Hello",
   	property2 : "MmmMMm",
   	property3 : ["mmm", 2, 3, 6, "kkk"],
   	method1 : function(){alert("Method had been called" + this.property1)}
   };
   
   timObject.method1();
   alert(timObject.property3[2]) // will yield 3
   
   var circle = { x : 0, y : 0, radius: 2 } // another example
   
   // nesting is no problem.
   var rectangle = { 
   	upperLeft : { x : 2, y : 2 },
   	lowerRight : { x : 4, y : 4}
   }
   
   alert(rectangle.upperLeft.x) // will yield 2
   
   //-->
   </script>

    Literal notion can contain arrays or arbitrary JavaScript expressions or values.

   While using the new operator or literal notion to create a custom object is both simple and logical, the biggest shortcoming is that the result is NOT reusable- we cannot easily initialize different versions of the created object. For example with the first demonstration above, if the person's name is not "Tim Scarfe", we would need to redefine our entire object just to accommodate this change.

3. Object Constructor and prototyping
   

   In the world of OOP, the previous ways of defining an object is too limiting in many situations. We need a way to create an object "type" that can be used multiple times without having to redefine the object every time to meet each particular instance's needs. The standard way to achieve this is to use the Object Constructor function.

   An object constructor is merely a regular JavaScript function, so it's just as robust (ie: define parameters, call other functions etc). The difference between the two is that a constructor function is called via the new operator (which you'll see below). By basing our object definition on the function syntax, we get its robustness as well.

   Lets use a real world item "cat" as an example. A property of a cat may be its color or name. A method may be to "meeyow". The important thing to realize, however is that every cat will have a different name or even meeyow noise. To create an object type that accommodates this need for flexibility, we'll use an object constructor:

   <script language="javascript" type="text/javascript">
   <!--
   
   function cat(name) {
   	this.name = name;
   	this.talk = function() {
   		alert( this.name + " say meeow!" )
   	}
   } 
   
   cat1 = new cat("felix")
   cat1.talk() //alerts "felix says meeow!"
   
   cat2 = new cat("ginger")
   cat2.talk() //alerts "ginger says meeow!"
   
   //-->
   </script>

    Here the function "cat()" is an object constructor, and its properties and methods are declared inside it by prefixing them with the keyword "this." Objects defined using an object constructor are then instantiated using the new keyword. Notice how we're able to easily define multiple instances of cat, each with its own name- that's the flexibility object constructor brings to custom objects. Constructors create the blueprints for objects, not the object itself.

4. Adding methods to our object using prototype
   

   We saw above how to add a method to our constructor function by merely declaring it inside the function. Another approach is through prototyping, which is also more popular due to its elegance. Prototype is a type of inheritance in JavaScript. We use it when we would like an object to inherit a method after it has been defined. Think of prototyping mentally as "attaching" a method to an object after it's been defined, in which all object instances then instantly share.

   Lets extend our original cat() object above with an additional method to change the cat's name, using prototype:

   <script language="javascript" type="text/javascript">
   <!--
   
   cat.prototype.changeName = function(name) {
   	this.name = name;
   }
   
   firstCat = new cat("pursur")
   firstCat.changeName("Bill")
   firstCat.talk() //alerts "Bill says meeow!"
   
   //-->
   </script>

    As you can see we merely use the keyword "prototype" immediately following the object's name to utilize this functionality. The custom method changeName() is now shared by all instances of cat.

5. Using prototype on prebuilt JavaScript objects
   

   Prototyping works on both custom objects and select prebuilt objects, such as Date() or String. For the later, the general rule is that you can prototype any prebuilt object that's initialized with the "new" keyword. I'm now going to give you an example of the later, by adding additional functionality to the prebuilt Array object of JavaScript.

   IE5 doesn't support the shift() and unshift() methods of Array that NS4+ does, so lets prototype them in!

   <script language="javascript" type="text/javascript">
   <!--
   
   // The shift() and unshift() methods.
   
   if(!Array.prototype.shift) { // if this method does not exist..
   
   	Array.prototype.shift = function(){
   		firstElement = this[0];
   		this.reverse();
   		this.length = Math.max(this.length-1,0);
   		this.reverse();
   		return firstElement;
   	}
   	
   }
   
   if(!Array.prototype.unshift) { // if this method does not exist..
   	
   	Array.prototype.unshift = function(){
   		this.reverse();
   		
   			for(var i=arguments.length-1;i>=0;i--){
   				this[this.length]=arguments[i]
   			}
   			
   		this.reverse();
   		return this.length
   	}
   }
   
   //-->
   </script>

    The possibilities are endless.