JavaScript and Prototypes

To fully understand the object system, however, it's important to understand the whole architecture behind it. JavaScript uses an approach called a prototype architecture.

First, remember that JavaScript is run line-by-line. Prior to the declaration of the Counter1 function above, the function does not exist. Also remember that nearly everything in JavaScript is an object. Thus, Counter1 is itself an object.

But what type are the objects stored in my obj1 and obj2 variables? Their type is object and nothing more. These objects are not instances of Counter1, although in our own minds it's okay to think of them as such. Counter1 is not a class; rather, it's simply a function that, when used in conjunction with the new keyword, creates a new object.

If you want to give the members to the objects created by the Counter1 function, you can do so inside the Counter1 function, as I did with this line:

this.value = 0;

However, there's another way to do this. Objects in JavaScript can optionally include a member called prototype. This member is itself an object, and as its name implies, it provides a prototype for objects created based on the object.

That's a mouthful, so let's look at an example. Consider the Counter1 function. When you created this function (via the function keyword), you created a function object, which automatically came with a member object called prototype. If you're trying out the code in FireBug, you can inspect this member. Try an alert:

alert(Counter1.prototype)

This will open an alert box displaying the words [object Object], which simply means it's an object. Initially, this object doesn't contain anything. But if you add members to this object, the objects you create by calling new Counter1 will get copies of these members.

Let's try another example with the help of a new function called Counter2. Here's the code:

function Counter2() {
}

Not much there... yet. Follow with this code:

Counter2.prototype.value = 0;
Counter2.prototype.increment = function() {
    this.value++;
}

This adds two members to the Counter2 function's prototype object, one called value and one called increment. When you create a new object using the new keyword and calling this Counter2 function, your new object will automatically inherit copies of the members of this prototype. Try it out:

c1 = new Counter2();
c1.increment();
c1.increment();
alert(c1.value);

When the alert box opens, you'll see the value 2; thus, c1 has the value and increment members. In FireBug, you can inspect the object using FireFox's built in dir function:

>>> dir(c1)
value      2
increment      function()

But now try inspecting the Counter2 function's prototype object:

>>>dir(Counter2.prototype)
value      0
increment      function()

Prototypes are an important part of JavaScript as they provide a handy means by which objects can be given members. Remember, however, the prototype member is just an object itself, a member of the Counter2 object.

Up Next

Next time we'll continue this discussion with objects and you'll see how many things that we think of as built-in types are, in fact, objects themselves. This includes the Function object and the Array object. Once you understand these, you'll be well one your way to processing data in JavaScript. And from there, we'll conclude this series with an introduction to the AJAX.