Object Oriented Javascript - 1 : Object

28th December, 2012

Diode

Javascript in combination with HTML has become the platform that can run an application in any device which has a Javascript Engine, and most of the devices today ranging from Mobile Phones to Desktop Machines, including Set-Top Boxes now support Javascript. No wonder… because today in this era of Social Networks it is the one and only Client Side Scripting Language that powers billions and billions of web pages.

All of us started writing Javascript to handle Events in an HTML DOM using a number of functions scattered across a single source file or inside a script tag in HTML, but now only those survive who writes scalable and maintainable Javascript. Obviously everyone’s first attempt is to do it in the Object Oriented way, but definitely you can try alternatives :)

Assuming that you have basic knowledge in

Object Oriented Concepts
Javascript
Using Javascript Console

You can go through the following before starting (optional)

Object

The Javascript type <strong>Object</strong> is the base of all the custom objects that we create.

There are different objects available in the Javascript API. For example,

Math
Date
Number

complete list

Creating an object

An object can be created in different ways

1.Using type `Object`

var myObject = new Object();

2.Using Literal Notation

var myObject = {};

3.Using a function

You can skip this at this point.It is explained in detail here.

Adding Properties and Methods

Properties and Methods can be added Dynamically in different ways.

The following three methods add three properties name, age, location to object myObject.

 var myObject = new Object();  
 myObject.name = "diode";  
 myObject.age = 78;  
 myObject.location = "India";

 var myObject = {  
  name : "diode",  
  age:78,  
  location:"India"  
 };

 var myObject = {};  
 myObject.name = "diode";  
 myObject.age = 78;  
 myObject.location = "India";

These properties can be read as shown below

 var name = myObject.name;  
 var age = myObject.age;

The following code snippets show how two functions showName, showLocation can be added in three ways.

 var myObject = new Object();  
 myObject.name = "diode";  
 myObject.age = 78;  
 myObject.location = "India";  
 myObject.showName = function(){  
     alert(this.name);  
 };  
 myObject.showLocation = function(){  
     alert(this.location);  
 };

 var myObject = {  
     name : "diode",  
     age:78,  
     location:"India",  
     showName:function(){  
         alert(this.name);  
     },  
     showLocation:function(){  
         alert(this.location);  
     }  
 };

 var myObject = {};  
 myObject.name = "diode";  
 myObject.age = 78;  
 myObject.location = "India";  
 myObject.showName = function(){  
     alert(this.name);  
 };  
 myObject.showLocation = function(){  
 alert(this.location);  
 };

These functions can be invoked as shown below

 myObject.showName();  
 myObject.showLocation();

Instance

Now let us examine the object car.

 var car = {
     name:”i20”,
     manf:”hyundai”,
     exprice:650000,
     tax:100000,
     getOnRoadPrice:function(){
         // this refers to instance car
         return this.format(this.exprice + this.tax);
     },
     format: function(amount){
         return amount.fixed(0);
     }
 };

As in other common programming langauge, inside any function func added to car and invoked as car.func(params), this refers to that particular isntance, car. So all the properties and functions of car can be accessed using this from inside any function of car.

Prototype

Let us examine what is the role played by prototype.

Try the following after the code snippet given above.

 alert(Object.prototype);  
 alert(car.prototype);

jsbin

First alert shows [object Object]
Second shows undefined in alert.

Let us explore Prototype in detail to find out the reason: Next

Javascript