pavanarya

Let us share the knowledge

Creating And Working With Classes in JavaScript

with one comment

Hi,
In this post i want to give an overview on how we can create classes,objects etc in javascript
The questions that came into my mind when i heard about classes and objects in java script are

1. Do we have a key word “class” in java script too(because i have some experience in java and C# where we have a key word called “Class” for creating classes).

2. Is java script really object oriented??

Answers:

1. No we don’t have a key word “Class” in java script for creating classes.
2.Yes it can can be treated as object oriented because it supports many features like polymorphism, encapsulation etc.

Creating a class with public and private properties

So if the answer for 1st question is No. Then how we are going to create classes. Let us see that

<script language="javascript">
function Car(price)
{
this.name="Swift";
this.color="red";
this.price=price;
var testprivate="hai";
this.returnPrivateval= function(){return testprivate;};
}
var car=new Car('700000');
alert(car.price);
alert(car.testprivate);
</script>

A javascript class can be created by using a simple function. When ever we call this function with a new keyword then this particular function will act as a constructor.

So inside the Car function we can define as many as properties. Also we can have public and private properties just like in c#.

Generally a public properties are defined by this.variablename where as private properties are declared as var.
In our example all the properties name,color,price are public where as testprivate is private. So alert(car.testprivate) returns undefined or error based on browser.

Adding Methods To our Class

Now let us add methods to our class “Car”

<script language="javascript">
function Car(price)
{
this.name="Swift";
this.color="red";
this.price=price;
var testprivate="hai";
this.getCarDetail=getCarDetail;
}
function getCarDetail()
{
return "This is a"+this.color+"color"+this.name+"car";
};

var car=new Car('700000');
alert(car.price);
alert(car.getCarDetail);
</script>

In the above code piece we added a new function getCarDetails() but we wrote that function out our class “Car”. But we are adding this function getCarDetails() to our class Car using this statement

//refering to method declated out of our class
this.getCarDetails=getCarDetails;
//Creating object and calling method
var car=new Car();
alert(car.getCarDetails);

In javascript we can assign any function declared to a property just like the above one. And when we call that function using object.Functionname() it will execute the actual function.

Defining inline methods

So our function getCarDetails is declared out side our class and it is present in the global namespace. Suppose we are including another javascript file using and this particular xyz.js also contains a function getCarDetails() then we will have some conflicts.

So inorder to overcome this we can declare inline functions inside a class as follow.

<script language="javascript">
function Car(price)
{
this.name="Swift";
this.color="red";
this.price=price;
this.getCarDetail = function (){
return 'This is a'+this.color+'color'+this.name+'car';
};

}

var car=new Car('700000');
alert(car.getCarDetail());
</script>

Another Way of Creating Classes and object at a time using new Keyword

<script language="javascript">
var car=new function()
{
this.name="Swift";
this.color="red";
var testprivate="this is private";
this.returnPrivateval= function(){return testprivate;};
this.getCarDetail = function (){
return 'This is a'+this.color+'color'+this.name+'car';
};

}
alert(car.getCarDetail());
alert(car.returnPrivateval());
</script>

So in the above code instead of creating a car object again we are creating it at the time of class creation itself. And later we can make use of the car object as usual.








About these ads

Written by pavanarya

December 17, 2011 at 5:24 pm

Posted in Java script

One Response

Subscribe to comments with RSS.

  1. [...] Hi, In my previous post we saw how to create classes and methods in java script. [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 69 other followers

%d bloggers like this: