User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper First step of Object Oriented JavaScript

First step of Object Oriented JavaScript:

Now a day’s when RIA design pattern is so popular. Good numbers of JavaScript Framework available in market which use to develop modern web application.
After this change, it’s necessary to look at how we can manage our code in JavaScript, because this entire framework designed using with JavaScript. In this blog we will discuss the JavaScript with some object oriented conventions seen in the more strongly typed programming languages.

We create object in JavaScript with combination of Constructor & Prototype pattern. Before we are going to create this object we discuss why we need that or we can say what is benefit of this pattern?


Now a day’s people used below object initializer syntax:

var hrEmployee={ };

var operationEmployee={ };

Then defined their properties and method like:

hrEmployee.firstName="sample name";
hrEmployee.lastName="sample name";
hrEmployee.age=28;
hrEmployee.contact="9871062500";

hrEmployee.getname=function(){

return hrEmployee.firstName+ '  '+ hrEmployee.lastName;
};


For Operation Employee:

operationEmployee.firstName="sample name";
operationEmployee.lastName="sample name";
operationEmployee.age=28;
operationEmployee.contact="9871062500";

operationEmployee.getname=function(){

return operationEmployee.firstName+ '  '+ operationEmployee.lastName;
};


What we analyze in above code, there ar a lots of duplicated stuff here that is frankly, unnecessary. Let's fix that using with Constructor & Prototype pattern.

JavaScript Constructors:

We will start to discuss importance of Constructors with following code, What we want to do, create an intermediate parent object that contains the properties that are more generic and not necessary to be on the child object itself.

/****

* Employee  Constructor

***/

function Employee(firstName, lastName, age, contact){

this.firstName=firstName;
this.lastName=lastName;
this.age=age;
this.contact=contact;
}

Use of constructor is basically set the main properties of an object like above code when we create a parent object of Employee with generic properties.So now if we want to create of Hr employee, we have do it in the following way:

var hrEmployee=new Employee('sample name','sample last

name',28,'9871062500');

Above code create a new Employee object, with the given properties value. In above code 'this' keyword being used to assign the properties value of object. So now if you want to access of Hr Employee name just use this below code

console.log(hrEmployee.firstName);

JavaScript Prototype :

Now turn come to implement Prototype in JavaScript. Through Prototype we can share common function to all related objects.Like above example there is common function to getname of employee so we do this with prototype implementation:

Employee.prototype={
constructor: Employee,
     getName:function(){

          return this.firstName+ '  '+ this.lastName;
     }

}

In above code we passed Employee constructor into prototype and the thereafter we add function for the getname or we can add list of different function for the action we want to employee to do.


Now we can directly access these function with created objects:

var hrEmployee=new Employee('sample name','sample last

name',28,'9871062500');

var name=hrEmployee.getName();

Enjoy & hope we understand the need of Constructor & Prototype pattern & how can we implement Inheritance in Object Oriented JavaScript? Next blog we discuss depth knowledge of this topics with more details of internal and external flow.


crazydeveloper Home Page 06 June 2015

Become a Fan