Fernando Vía Canel

JavaScript is now the world most popular programming language. And I must agree with Douglas Crockford - also the world most misunderstood programming language.

JavaScript was developed on a solid programming paradigm, and is a very flexible and powerful language. Still, until the RIAs came into scene, it was though to be a helper language with little or no use. And its powerful prototype orientation was held as another reason to diminish it: most programmers distrust its flexibility.

However, RIAs, Ajax and now jQuery appeared, and now we’re talking about JavaScript. jQuery makes intensive use of JavaScript’s prototype orientation, and is one of the key reasons of jQuery’s great success.

I’ll explain now how to fully implement prototype orientation in JavaScript. For space reasons, patterns and best practices will be posted later.

Applying prototype orientation in JavaScript

Every JavaScript object has a member called prototype. Making the method call new FunctionName() will result in a replica of FunctionName.prototype. When using classical style inheritance and objects in JavaScript, we first create a function called FunctionName that will serve as the constructor, and then we add member methods and member objects to the FunctionName.prototype . We can add members to FunctionName outside the prototype, and they won’t be copied into the instances. So, FunctionName behaves almost like a class.

In prototype orientation objects clone from objects. So, for prototype orientation to work in JavaScript we need two things:

• Some way to aggregate objects from the ground, without a class or class-like function
• The ability to clone objects

We have both: JSON, and a snippet of nifty Crockford’s code. Let me explain it further:

Aggregating Objects

An object seen as an aggregate is outstandingly descript in JSON. JSON is a lightweight object serialization language (JavaScript Object Notation) developed by Douglas Crockford, and implemented in mayor browsers several years ago. This is not the place for an extensive explain about JSON, but let me show you some samples of JSON code, applying the Garden prototype as described in my last article:

var Garden = {     “road”: “grey”,     “flower”: “rose”,     “floor”: “grass”,     “animal”: “bird” }

 

This is the static way of object generation in JavaScript. There is also a more dynamic, for method and member adding and deleting, anytime, anywhere:

Garden.sky = “blue”; // Adds the member sky, and set’s it as blue Garden.watch = function () {     // Adds the method watch to the Garden     alert(”A ” + this.road + ” road, a ” + this.flower + “, a ” + this.animal + “, dude, this is beautiful!”); }

Cloning objects

Now, we want to create a Garden for our house. Let’s say

var myHome = {     “garden”: null  // garden initialized in null, since we have not a garden cloning ability yet }

 

We could have defined Garden as a function. In JavaScript, all functions have a member called prototype, that is instantiated every time we make the call new FunctionName();. But this would force us to keep functions working as classes, and still we can’t clone an object we already have.

So, let’s make a twist about it (all credits to Douglas Crockford):

// o is the name of the object to be cloned function object(o) {     function N() {} // We define a new, empty function.     N.prototype = o; // The prototype of N is now the object we want to clone.     return new N(); // Since N.prototype is o, our object-to-be-cloned, a clone of o is returned }

 

And that’s it! Fabulous. We can now have our precious garden, and, of course, watch it:

myHouse.garden = object(Garden); myHouse.garden.watch();

 

Copy-paste if you like! This is working code