Inheritance.

JavaScript also supports the inheritance mechanism that is the corner-stone of the OOP.
To show the easiness of the JavaScript inheritance mechanism let’s review two already defined objects of ours ‘Country’ and ‘Government’ and one new object ‘Parliament’. Let’s assume that these objects have the following object hierarchy:

Constructor functions for these objects will look like these:

function Country(Name,Capital,Population){
  this.Name=Name;
       this.Capital=Capital;
  this.Population=Population;
}

function Government(President){
  this.President=President;
}

function Parliament(Speaker){
  this.Speaker=Speaker;
}

Take a look at the ‘Country’ object prototype.

Cn=Country.prototype;

Cn.describeCountry=function(){
  var desc=”Name: ”+this.Name+” Capital: ”+
this.Capital+” Population: “+this.Population;
 alert(desc);
}

The following construction defines ‘Country’ as ‘Government’ prototype (‘Government’ inherits the ‘Country’):

Government.prototype=new Country("France","Paris",59330000);

When ‘Government’ object is created it inherits all the ‘Country’ methods and properties. In other words, although ‘describeCountry()’ method is not defined for ‘Government’ object it is available since ‘Country’ object is defined as ‘Government’ prototype.

Government_France=new Government("Jacques Chirac");
Government_France.describeCountry();  

New methods can also be defined for the ‘Government_France’ object:

 Government_France.describeGovernment=function(){
         alert(“President: ”+this.President);
}

Let’s complete the ‘Parliament’ object definitions.

Parliament.prototype=new Country("France","Paris",59330000);

Pn=Parliament.prototype;
Pn.describeParliament=function(){
 alert("Speaker: "+this.Speaker);
}

Parliament_France=new Parliament("Jean-Louis Debre");

As you can see prototypes can also be modified for the inherited objects.

The above examples demonstrates elegance of the JavaScript OOP model which enables this easy to learn language perform variety of the complex tasks for the real life programming.

Real life example.

This very OOP approach was used in our company when we developed the CodeThat.Com’s set of the web controls. For example the ‘CodeThatCalendar’ is nothing but an object declared as:

 function CodeThatCalendar(def) {
 this.def = def;
 this.links = {};
 this.styles = {};
 this.hideifr = true;
  
 if (typeof(this.def.img_path)!="undefined") {
      if (this.def.img_path.lastIndexOf("\/")!=this.def.img_path.length-1) this.def.img_path=this.def.img_path+"\/";     
           }
          
   if (typeof(this.def.template_path)!="undefined") {
      if (this.def.template_path.lastIndexOf("/")!=this.def.template_path.length-1) this.def.template_path=this.def.template_path+"/";     
            if (this.def.template_path.indexOf("\/")!=0)
                if (typeof(this.def.img_path)!="undefined" && this.def.img_path.indexOf("\/")!=0) {
                   s=this.def.template_path;
                   a=s.split("/");
                   a.length=a.length-1;
                   t="";
                   for (i=0; i<a.length; i++){
                          t=t+"../";
                    }
                   this.img_path=t+this.def.img_path;     
              }
         }
 };

var CTc = CodeThatCalendar.prototype;

CTc.hide = function()
 {
 …
 }

CTc.create = function(d,ctl) {
  …
  }

Various methods of the control work with the layers giving the control fancy look and feel and enabling user perform various actions the calendar supposed to do. For example, the below function sets the value of the HTML form control to the date user have selected.  This is performed each time user clicks the calendar date.

function CodeThatSetDay(c,f,d,m,y,i,ifr) {
 var doc;
 var w = window.opener||this.parent;

 if(w&&!i)
  doc = w.document;
 else
  doc = document;
 var e = CodeThatFind(doc,c);
 if(Def(e))
 {
  e.value=CodeThatDateFormat(f,d,m,y);
  if(e.fireEvent) e.fireEvent("onchange");
  else {
   if(e.onchange) e.onchange(); 
  }
 }

 if(w&&!i)                           
 {

  if(Def(w) && Def(ifr))
  {
   var iframe = CodeThatFind(doc,ifr);
   if(Def(iframe))
    iframe.style.visibility = 'hidden';
   if(ua.opera6)
   {
    var d = CodeThatFind(doc,"calendar_div");
    if(Def(d))
    d.style.visibility='hidden';
   }
  }
  else
  {
   window.close();
  }
 }
};

(The examples of CodeThatCalendar functions are not fully functional. They are listed here for illustrative purposes).

As you can see JavaScript is indeed powerful and user friendly programming language with many abilities which help to create really complex and interesting solutions. Since the DOM model is supported by majority of modern browsers you can be sure your solution will be accessible for the majority of users. Of course there’s much more to learn in the JavaScript: events, DOM, layers, and the cross-browser portability is also not always that transparent but this is for another story or... several stories.

Author.

About the author: Sergey Zavadski is one of the core JavaScript developers at CodeThat.Com (http://www.codethat.com/) He has developed number of the scripts offered by the company and leads the customers support department.

Article original: http://www.codethat.com/doc/articles/article_jsoop.pdf