OOP in JavaScript.
The article by Sergey Zavadski introduces the object model of the JavaScript programming language and demonstrates common practices in the OOP (object oriented programming) with the JavaScript.
Simplicity of the JavaScript.
JavaScript is proven to be the one of the simplest programming languages to learn and use. Minor snippet of the code (in fact one string) performs various actions like creating of the windows or changing the text in the status bar. The flexibility, short learning curve and the fact that JavaScript is not “strongly typed” language explains extreme popularity of the JavaScript among the web masters community which selected this language as the language of choice to provide the static HTML pages with the dynamic attractive content.
The powerful tool.
However in spite of its visible simplicity the JavaScript, when following the DOM specifications, is quite advanced and powerful tool providing all the required facilities for the creation of the complex solutions (client side) such as menus, trees, grids. These possibilities are actually reflecting the JavaScript’s power when it comes to the layers manipulations. Not the last reason for this power is OOP structure of the JavaScript programming language which was planned and implemented as an object oriented language!
Object model.
The JavaScript object is the entity with the properties that can be either other objects or variables. For example we have ‘Country_Italy’ object. We can assign the values to the properties of this object like this:
Country_Italy.Name=”Italy”;
Country_Italy.Capital=”Rome”;
Country_Italy.Area=301000;
However the ‘Country_Italy’ object itself can be the property of other object:
Europe.MostBeautifulCountry= Country_Italy;
JavaScript comes with the library of the built-in objects like ‘Window’, ‘Math’, ‘String’ and many others. But what makes the language really flexible is the ability of creating own custom objects. There are two possible methods for making custom objects in the JavaScript. First one is using of the direct initialization. The code in this case may look like this:
Country={Name:”France”,Capital:”Paris”,Government:{President:”Jacques Chirac”}};
We have created the Country object with the ‘Name’, ‘Capital’ and ‘Government’ properties and the ‘Government’ property is the object with own list of properties. We’ve also initialized these properties with the initial values. All is done in the one single string. The following construction creates and initializes the empty object:
Country={};
Another way to create objects in the JavaScript is defining the special function constructor for the object and initialization of the object with the ‘new’ operator. For example:
function Country(Name,Capital,Population){
this.Name=Name;
this.Capital=Capital;
this.Population=Population;
}
The ‘Country’ function is the constructor function. Now to create the object using this defined constructor we use the new operator:
Country_Italy=new Country(“Italy”,”Rome”,301000);
Just like in the previous example the property can be the object itself:
function Government(President){
this.President=President;
}
function Country(Name,Capital,Government){
this.Name=Name;
this.Capital=Capital;
this.Government=Government;
}
Government_France=new Government(“Jacques Chirac”);
Country_France=new Country(“France”,”Paris”,Government_France);
Another advantage of the OOP fully implemented in the JavaScript is that the object can have the methods (not only properties). The methods are the functions described within the object scope that usually operate with object’s properties. The methods are described much like the properties:
function describeCountry(){
var desc=”Name: ”+this.Name+” Capital: ”+
this.Capital+” Population: “+this.Population;
alert(desc);
}
In the above definition this operator provides an access to the object the described method belongs to.
Country_Italy.describeCountry=describeCountry;
The construction below fully repeats the above one:
Country_Italy.describeCountry=function(){
var desc=”Name: ”+this.Name+” Capital: ”+
this.Capital+” Population: “+this.Population;
alert(desc);
}
The construction:
Country_Italy.describeCountry();
calls the ‘describeCountry’ method of the ‘Country_Italy’ object.
Prototypes based object oriented language.
Unlike some other popular OO languages (Java, C++) whose object model is based on the classes the object model of the JavaScript is based on the prototypes. The main difference between those two approaches is that in the prototype based language there’s no difference between the class and the class instance entities – you only deal with the objects.
The prototype (can be viewed as a template that defines the way initial object’s properties values are assigned) is any object declared with the prototype operator. This object can be the parent of any newly created object and this is how the JavaScript supports inheritance – important OOP language characteristic. Let’s see our Country object:
function Country(Name,Capital,Population){
this.Name=Name;
this.Capital=Capital;
this.Population=Population;
}
Now let’s declare ‘Cn’ - the ‘Country’ object prototype:
Cn=Country.prototype;
Cn.describeCountry=function(){
var desc=”Name: ”+this.Name+” Capital: ”+
this.Capital+” Population: “+this.Population;
alert(desc);
}
Now we can call the ‘describeCountry’ method in any ‘Country’ descendant with only two strings of code:
Country_Italy=new Country(“Italy”,”Rome”,301000);
Country_Italy.describeCountry();
Using this approach we can define in the prototype any number of the methods and properties. Defining methods and properties in the prototype rather then defining them directly for each object gives many advantages:
- You don’t have to define all required methods or properties any time the object is created. You define all the necessary methods and properties in the prototype and then all you have to do is to create the object.
- Makes your code more secure since you can keep all object definitions in the separate file
- Makes your code easier to read
