Friday, October 7, 2011

Object Oriented Javascript - Object, Constructor and Methods

Hey, in this post, i will share something great and incredible. Have you heard about Object Oriented Programming with Javascript? At first, maybe you think that's impossible because javascript is a very simple language. Now, you must change your mind because javascript is a very powerful language and will be mostly used by many programmers in the future. Before you read further, you must having some knowledge about javascript and object oriented programming.

Okay, let's move to the explanation. Actually, everything in javascript is an Object. There is no class in javascript. You don't need to define a class to create an object. All you have to do is create the constructor, its properties and its methods. Here's the code :



In the code above, i want to make an object that represent a User. I'm doing that inside a function. At first, it might look like a constructor in other Object Oriented Language. But, i think it looks like a class because we can define properties and method in that function. But you must keep on your mind that there is no class in Javascript. 

The properties are name and age. You must define this.name = name and this.age = age at first. You don't have to declare those properties at first. Javascript automatically create them for you. All you have to do is assigning the value of the parameter to that properties.

You also see there are three methods defined inside the function. Here is the short explanation :

  - Private Method
Private method is a method that can be called only inside the scope of the function that define the Object (the function that i explain above). It can't be called in other function or other scope.

  - Public Method
Public method is a method that is accessible everywhere. You can call it in other function or other scope.

  - Priviledge Method
Priviledge method is a method that is public, but accessing a private properties. It's like a setter/getter in other Objec Oriented Languages.

In the code above, i create three function to represent each type of methods. In javascript, method is a function. 

showPrivate() is a private method. You can access it only inside the scope of that class-like function. 

this.display is a public function. You can define it by assigning a function to this.display, like what i've been done above.

this.getYearBorn is a priviledge function. It's manipulate a private propeties to show the year of birth.

To test the code above, create a function that will create an object based on the function above and call its methods. Here is the code :


I create a variable that will hold the User Object. The syntax is like above. Look at the new keyword. It's look like declaring an object in other Object Oriented Language. After create an object, i call its method and display them inside the alert function.

After create the function to test the code, create a simple HTML file to call Test() function. Here is the result when i call that function.



It is great, isn't it? Now you must keep in your mind that Javascript isn't a simple language. It's a powerful languages and an Object Oriented Programming Language. In the next post, i will post the other capabilities of Javascript that support Object Oriented Programming. You can download the source code of this example here.

Hopefully this post will help you to understand the basic of Object Oriented Programming with Javascript. If you have more question, please let me know.. Regards. !!

No comments:

Post a Comment