javascript's OO and function as object as well

Functions stored in variables

Just
to make sure you're completely clear on how all this works, make sure you fully
understand the difference between these two pieces of code:

function MyFunc() {

    alert('hi');

}

and, by comparison, this:

MyFunc2 = function() {

    alert('there');

}

The first of these creates a function called MyFunc. The second of these
creates a function, but doesn't give it a name, and then stores the function in
the MyFunc2 variable. From there, you can call either using MyFunc() and
MyFunc2().

Next, think about how a function is, in fact, an object. Consider this code,
which uses the preceding MyFunc2 variable:

MyFunc3 = MyFunc2;

MyFunc3.somemember = 10;

alert(MyFunc3.somemember);

This first line of this code copies the value of MyFunc2 to MyFunc3. Since
the value of MyFunc2 is the unnamed function, the value of MyFunc3 is this same
function. The second line adds a new member to the function called somemember,
and sets its value to 10. Although I'm using the MyFunc3 variable to do this,
the two variables refer to the same function object. Thus, in the third line,
when I do an alert on the MyFunc3 value's somemember, I'll see the 10 that I
assigned. Thus, these two variables refer to the same single function object.
Changing one changes the "other", since they're both, in fact, the
same object.

Now let's continue our discussion. Note: To create the examples for this
article, I used FireFox and the FireBug tool, simply because it's easy to
quickly try out JavaScript code.

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.