Object Oriented Programming Concept in JavaScript

JavaScript is dynamically type language unlike C# and VB which are statically typed. It means compile time validations are available in statically typed language(C#, VB) which is not possible in dynamically typed languages (JavaScript, python.Etc)

Object creation and instantiation are slightly different in JavaScript. Unlike Java, C++, C# etc, JavaScript does not contain class statement. JavaScript is a prototype-based language. JavaScript uses functions as classes.

There are 2 ways for creating and Instantiating a class in JavaScript.

1. Constructor function
//Creating a StudentCls class
function StudentCls (){

};

//Defining properties of StudentCls class
function StudentCls ()
{
this.name=’Bimlesh’;
this.id=’20001’;
};

//Defining Method inside StudentCls class
function StudentCls ()
{
this.name=’Bimlesh’;
this.id=’20001’;
this.PersonalInfo=function()
{
alert(‘Hi I am ‘+this.name);
}
};

//Object creation and properties, method access.
var objStu1=new StudentCls();
objStu1.name;
objStu1. PersonalInfo();
var objStu2=new StudentCls();
objStu2.name;
objStu2. PersonalInfo();
//Using a constructor function
function StudentCls (name,id)
{
this.name=name;
this.id=id;
this.PersonalInfo=function(message)
                          {
                          alert(message+this.name);
                          }
};

//Object creation and method access.
var objStu=new StudentCls(‘Bimlesh Singh’,’20001’);
objStu. PersonalInfo(‘Hi I am’);

2. Literal notation:
//Creating a StudentCls class
var StudentCls= {
};

//Defining properties of StudentCls class
var StudentCls= {
name:’Bimlesh’,
id:’20001’
};

//Defining Method inside StudentCls class
var StudentCls= {
name:’Bimlesh’,
id:’20001’,
PersonalInfo: function()
                    {
                 alert(‘Hi I am ‘+this.name);
                   }
};

//Object creation and properties, method access.
StudentCls.name;
StudentCls. PersonalInfo();
//Calling parameterized methods.
var StudentCls= {
name:’Bimlesh’,
id:’20001’,
PersonalInfo: function(message)
                     {
                    alert(message+this.name);
                     }
};

//Object creation and properties, method access.
StudentCls. PersonalInfo(‘Hi I am’);

Note: if you are using literal notation like below
var StudentCls= {
name:’Bimlesh’,
id:’20001’,
PersonalInfo: function(message)
                     {
                     alert(message+this.name);
                     }
};

var obj= StudentCls.name;
alert(obj);//it will work correctly

but if you are using this approach to method then you will get error saying ‘undefined’
var obj= StudentCls. PersonalInfo(“Hi I am”);
alert(obj);//it will through error.

//Correct approach use either .call or .apply method.
var obj= StudentCls. PersonalInfo;
alert(obj.call(StudentCls,’Hi I am’));
Note.for calling overloaded method we need to set first parameter name as class name and then values.
While using .apply instead of .call we need to pass array as second parameter.
var obj= StudentCls. PersonalInfo;
alert(obj.call(StudentCls,[’Hi I am’]));

UseFul Links:
1. http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript
2.http://viralpatel.net/blogs/object-oriented-programming-with-javascript
3. http://www.javascriptkit.com/javatutors/oopjs4.shtml