In our current era where AJAX and DHTML become common practice on site development, the role of JavaScript becomes more and more important. As we add more complexity to this scripting language, it is almost necessary for us to write better scripting code to enable us avoiding programming nightmare where javascript functions are all over the places and becoming unmanageable. One of the important aspect of JavaScript scripting language that we don’t usually realize is how impressive its support of object oriented programming. The first two important advantage of OO programming are encapsulation and inheritance (I am leaving the 3rd character of OO, polymorphosism, away for now). In complex web project, taking advantage of OO programming practice on scripting JavaScript is essential and very beneficial in the long run of the project.
The Object object is the base object for all native and user-defined objects. All objects inherit from this superclass. The Object object has a dozen of properties and methods. Examples are constructor, toString(), and valueOf(). Both native object (such as Math, Number, etc) and user defined object inherit all the properties and methods of Object.
Let’s start building our first superclass. In this example, we are going to create a user-defined super class call Person
function Person() {
this.name = "Default Name";
this.age = 30;
this.gender = new Array("male", "female");
}
Now we are going to create a subclass that will inherit Person
function Employee() {
this.division = "IT";
this.title = "Senior Architect";
this.projectmanager = "Sam Gambarin";
}
Employee.prototype = new Person();
Please note, there is another way to create the subclass but at I choose using “prototype” approach so that when you make changes to the property and methods of the super class later on, the changes will be dynamically inherited to the sub class.
Here are a sample on adding new property to the subclass:
Person.prototype.haircolor = "black";
So now with the code above, we can easily instantiate a new employee object when we need one and all the property will be carried over. Here are the sampe on how to do that:
var John = new Employee();
Here are some useful functions to debug these objects:
1. Use the isPrototypeOf() method to find out if object2 had object1 in its prototype chain:
Example: Employee.prototype.isPrototypeOf(John); // will return true because John is in Employee prototype.
2. You can probe the superclass of any object via its constructor property. This property returns the function by which the object was created with the new operator.
Example: alert(John.constructor);
3. Looping through all the properties within an object
Example:
for (property in John) {
alert(property);
}
This will alert all properties available in John.
Final notes:
As you can see that the language structure is very similar to regular OO programming. There are some differences the way the JavaScript engine handle this object, I suggest you visit the following link to get more knowledge on OO subject in JavaScript.
