I've done a few articles recently about JavaScript. Why? Because as we develop for the web, more and more of our development is moving to the client side. Even for us ASP.NET programmers, we need to know the browser-side language, which is usually JavaScript.

In the previous article, I introduced the notion of a function being an object. Here's the code I finished up with:

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

Counter1 is a function, but inside it creates an internal object. You can refer to the object in the code using the keyword this. When you call the function using the new keyword, you'll get back the same "this" object. Thus, you can do this kind of thing:

obj1 = new Counter1();
obj1.increment();
obj1.increment();
alert(obj1.value);

obj2 = new Counter1();
obj2.increment();
alert(obj2.value);

First I called Counter1 with the new keyword, which resulted in the creation of an object. The code inside the Counter1 function added on (at runtime) a value member and an increment member. The value member is an integer, and the increment member is a function which in turn increments the value. I can reference the value of the object through the this keyword both in the main Counter1 function as well as the newly-created (but unnamed) function stored in the increment variable.

Since I used the new keyword, the object created gets returned and I save it in the obj1 variable. To try it out, I call the object's increment function twice, and then I display the object's value member. (Technically, though, if I want to be precise, I should say that I call the unnamed function stored in the object's increment member.)

Then just to show that I really can create separate objects, I create a second object (which I store in obj2) and try out its members.

Functions stored in variables

Before continuing one, 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.