JavaScript, jQuery, and DOM model interaction

Hard Legacy

Imagine having a class with five methods defined and wanting another new one to take over four of them and change the fifth one. This is a clear case for inheritance. Listing 3 shows how that happens in JavaScript. In the code, the class derived from Greeter() subsequently receives the Bavarian greeting "Pfiat' di."

01 var Greeter = function(who){
02   this.toGreet = who;
03    this.sayHello = function(){
04     alert("Hello, " + this.toGreet + "!");
05   }
06 };
07
08 var extendedGreeter = function() {
09   this.bavarianHello = function(){
10     alert("Pfiat' Di," + this.toGreet + "!");
11   }
12 };
13 extendedGreeter.prototype = new Greeter("Vroni");
14 greeter3 = new extendedGreeter('Vroni');
15 greeter3.sayHello(); //-> Hello, Vroni!
16 greeter3.bavarianHello(); //-> Pfiat' Di, Vroni!

The code defines two functions, Greeter and extendedGreeter . In Greeter , I've transformed the earlier toGreet into a public attribute. The extendedGreeter() defines a method, bavarianHello() , which outputs the Bavarian greeting. This step is done by drawing on the toGreet attribute defined in Greeter , which works because the first statement after the Greeter and extendedGreeter function definitions combines them. This line binds the instance of Greeter to the prototype attribute of the class definition for extendedGreeter .

All JavaScript objects endow a prototype attribute that does not have an explicit definition with a fixed task: All instances created with new extendedGreeter() inherit the attributes of the objects bound to prototype .

However, this inheritance applies only to public attributes defined by this.<attribute-name> . Thus, you can change the Greeter class to expand it. Figure 4 shows an object dump of the Firebug console with the inherited method sayHello() and the newly added bavarianHello() .

Figure 4: A dump of the greeter3 object in the Firebug console (the second green line on the left) shows that the inheritance in this example works. The object contains the attribute toGreet along with the methods bavarianHello() and sayHello().

Collateral Damage

Inheriting a private attribute works in JavaScript only indirectly – with different effects on performance [8] [9]. The fact that no combination of the two most powerful features of JavaScript is possible  – creation of object instances with new and closure along with inheritance based on the prototype attribute – has brought the language much criticism.

The object orientation in JavaScript shows its immaturity. Like many web standards, it's a result of the browser war between Netscape and Microsoft. In its pursuit to conquer its competitor, Netscape raised the language to a standard a bit too hastily.