Javascript is sufficient object aware that object oriented design can be done with the language. The semantics for OO Javascript are alien to most of the current popular OO languages such as Java, C# and Python.

The main difference is the lack of a class keyword in Javascript so a class declaration is done with a function instead and the methods of the object are not bounded by the brackets {} or whitespace under the class keyword. One of the good things of the C-like languages and python's white space is that it makes for an aesthetic rigor so that encapsulation is held within a physical space in the source code, not just a compiler recognised one.

Rather than having a rats nest of nested literal functions inside an object declared with a function in Javascript the prototype property enables semantic and aesthetic appearance of encapsulation.

The prototype allows attributes and methods to be attached to an object. For instance:

 function Jot(username, description_html) {
   this._username = username;
   this._description_html = description_html;
 } 
 Jot.prototype.getDescription = function() {
     return this._description_html.replace('<p>','\n');
 }

Which exposes the object's members username and description_html and the method which returns the description without paragraph tags.

Prototyping can also be used to add functionality to existing or core objects whose internal details you have no control over. This can be done without the need for subclassing the object and having to use inheritance to achieve that behavior.

Adding prototype functionality to the Date() object is a good example. A common cause of confusion between American and Australian dates is that the Month and Date are in opposite positions when dates are written in local shorthand.

For instance:

Date.prototype.getAustralianDate = function() {
  return (this.getDate() + '/'
     + this.getMonth() + '/'
     + this.getFullYear());
 }
 Date.prototype.getAmericanDate = function() {
   return (this.getMonth() + '/'
     + this.getDate() + '/' 
     + this.getFullYear());
 }

And to test it:

d = new Date();
alert(d.getAustralianDate() + "\n" + d.getAmericanDate());

The alert shows the Australian style of date on the first line and the American style on the second line.

Does a prototype declaration over-ride a variable of the same name being set in a javascript constructor?

function Rock() {
  this.face = "mossy";
}
 
rock = new Rock();
alert(rock.face);
Rock.prototype.face = "dry";
alert(rock.face);
rock2 = new Rock();
alert(rock2.face);

The output is "mossy", "mossy" and "mossy". So the answer is no.

What about an alert that includes both this.face and prototype.face:

rock = new Rock();
Rock.prototype.face = "dry";
alert(rock.face + " " + Rock.prototype.face);

This returns "mossy dry". However if there is no public variable declared in the Javascript's object constructor:

function Rock() {
  this.weight = 10; // kgs
}
 
rock = new Rock();
Rock.prototype.face = "dry";
alert(rock.face);

The answer is "dry".

In OOP inheritance is a sub-class adopting its parents protected and public attributes and methods upon instantiation. To continue to the use the Jot example, a basic Jot accepts two strings from the Controller. A username and a description_html string which contains html tags in a string format.

function Jot(username, description_html) {
   this._username = username;
   this._description_html = description_html;
 }

Now the database stores the description in raw string format and html in case there are instances of the user not entering paragraph tags and using hard returns instead. So to edit a Jot the user may not want to see the additional formatting tags added in through using BeautifulSoup.

In which case we need a CleanJot object.

function CleanJot(username, description_html) {
   Jot.call(this, username, description_html);
 }
 CleanJot.prototype.getDescription = function() {
     return this._description_html.replace('<p>','\n');
 }

The thing to note in the subclass is the use of call() which is an inbuilt Javascript method analogous to super() in Java. So if we instantiate CleanJot we have access to _username, _description_html and getDescription(). For example:

 clean = new CleanJot('cam','overunder');
 alert(clean._description_html);
 alert(clean.getDescription());

Encapsulation is the process of hiding an object's details from external objects which seek to interact with it. This means there is a strong public interface to the object and the messy business logic of how it presents that public face is not of concern to the outside world. This strong decoupling of interface from implementation means that external objects are not dependent or susceptible to changes of the internal business logic of the object.

As an example with the CleanJot object we probably don't care if it appears as a variable or a method. For consistency's sake it is more readable as a variable.

function Jot(v_username, v_description_html) {
   this.username = v_username;
   this.description_html = v_description_html;
 }
 function CleanJot(v_username, v_description_html) {
   Jot.call(this, v_username, v_description_html);
   this.description = this.description_html.replace('<p>','\n');  
 }
 clean = new CleanJot('cam','over<p>under');
 alert(clean.description_html);
 alert(clean.description);

Following on from the previous article on encapsulation with OOP Javascript. A better example is a Ticket business object that has the internal business rule of not being able to be invoiced unless there is a work complete date.

function Ticket() {
   this.work_complete = null;
   this.invoice_date = null;  
 }
 Ticket.prototype.invoice_ticket = function() {
   if (this.work_complete != null) {
     this.invoice_date = new Date();
   } else {
     throw "Ticket cannot be invoiced unless work is complete.";
   }
 }

We can test it with:

ticket = new Ticket();
 
 // fails business rule encapsulated in business object
 try {
   ticket.invoice_ticket();
 } catch (error) {
   alert(error);
 }
 
 // passes business rule encapsulated in business object
 ticket.work_complete = new Date();
 try {
   ticket.invoice_ticket();
   alert("Ticket is invoiced for " + ticket.invoice_date);
 } catch (error) {
   alert(error);
 }