A function as a constructor

We've established that a function is an object and can have members. But wouldn't it be nice if we could take our preceding example, the counter example, and make multiple counters?

We can. To do so, we'll use what is probably the single oddest feature of the JavaScript language: In JavaScript, functions can serve as object constructors.

Again, we'll start fresh with a new example. I'll rename my function to Counter1. Before we start, I need to point out that when we use a function as a constructor, the function really does get called, unlike when we simply create a function object. Inside the function, then, is where you put any object initialization code. And this code can include a variable called this, which refers to the object.

Here's a start:

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

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

Statement-by-statement, this code creates a function object, and then creates a new instance of... of something... and calls the function's code. To do so, we use the new keyword followed by the function name, followed by the parentheses and any parameters we want to pass to the function.

Inside the function now, the code gives the object a new member variable called value. Then the function's done and we return to the next statement, which is the alert. When we run this code, we'll see a message box displaying a 0.

Notice that I didn't include a separate line like this one we saw earlier:

Increment.value = 0;

It's not needed, because inside the function we're adding the value member.

I mentioned the new object is an instance of something. What is it? It's really just an object and nothing more, not an instance of something. Conceptually we can think of it as being an instance of class Counter1, although technically it's not. It's just an object with members.

Of course, this object doesn't have a member for incrementing the counter. I changed the function; it just initializes the member but doesn't do any incrementing. That's where member functions come in. Let's modify the code a bit. Remember, function declarations are statements themselves that run. That means we can put them pretty much anywhere in our code. Have a look at this revised code:

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

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

Look inside the Counter1 function, the constructor. I've added an odd statement. It's sort of a function declaration, but not quite. What I'm really doing is just creating a function object but not giving it a name, which is something you're allowed to do in JavaScript. And then I'm saving that function object in a member variable called this.increment. (Remember, functions are objects. That means you can save them in variables, which is exactly what I'm doing here.)

Now the constructor adds the member function, which can then be called. But this is still odd: If you have a variable that holds a function object, to call the function you just "call the variable" by putting parentheses after the variable name. So that's what I do with this line:

obj1.increment();

Thus, the code first declares a function object, then creates a new instance of an object using the function as a constructor. Inside the constructor, the code adds a member called value, and a member called increment, which is a function. (Being precise, I hesitate to call increment a "member function" because it isn't. It's a variable containing a function object. Whew.)

Next, outside the constructor, the code displays the value (which is 0) Then the code calls the increment function, and finally the code displays the value again (now 1).

And so we have a self-contained counter. And the cool thing is we can make more than one:

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

After this code runs, you'll see two alerts, first showing that obj2's value is 3, and then one showing obj3's value is 1.

Coming up next

You now have the basis for an object system in JavaScript. But we're not done. Next time I'll show you how objects are incredibly flexible in JavaScript, and you can do some really strange but cool things, like use a function constructor to create two objects, and then add additional members to either or both objects.

Also, as I said, nearly everything in JavaScript is an object. A function is an object. And, believe it or not, there's an object itself called Function, which provides basic members to the function objects. I'll cover that bizarre, nearly-circular logic next time as well.

Oddly, the current version of JavaScript doesn't support inheritance. But there are some peculiarities in the language that can effectively mimic inheritance. And once you understand these peculiarities, you can do some pretty powerful things that compiled languages don't let you. See you shortly.