How do you make a Javascript object? If you want to do the job automatically you either have to create an object factory or a constructor. What's the difference? We continue our look at the essentially Javascript way of doing objects.

Efforts to make Javascript look just like any other object-oriented programming language succeed in covering up its true philosophy of objects. Javascript is a prototype object language and this actually suits a dynamic interpreted language more than the classical class.

In Part One we looked at the basics of object creation using the object literal. This is a good way to create small numbers of objects but now it is time to turn our attention to what we do when we want multiple instances of an object - this is the topic of object factories and constructors but to be complete we also look at object cloning.

The object factory

In the pprevious article we discovered that you can build an object very simply by creating an empyt object literal and then adding methods and properties to it dynamically. Manual object construction is fine when you want a one off object but what do you do when you want a lot of instances? The answer is we do what we always do - we code it. That is the automated way to object construction is to write code that creates the object.

What is the best way to package this code?

As a function of course.

So we are naturally led to the idea of a function which creates objects - an object factory. There is one small conceptual problem - in Javascript functions are also objects so strictly speaking an object factory is an object that creates objects - but this is mostly something we can ignore. It is however a reminder of the fact that:

• In Javascript (nearly) everything is an object.

So how do we create an object factory?.

At the end of the first part we encountered the point object:

var point={
 x:0,
 y:0
 setPoint:function(x,y){
        this.x=x;
        this.y=y}
};

and created a for loop to generate lots of instances.

Instead of taking this direct approach let's build an object factory that makes points.

function NewPoint()
{
 return {
 x: 0,
 y: 0,
 setPoint: function(x, y){
  this.x = x;
  this.y = y
 }
};

Notice that the function simply returns a reference to an anonymous object literal. Also notice that the this used in the object literal is set to the current context i.e. the anonymous object literal itself.

This is all there is to an object factory - build an object in the usual way and return a reference to it.

To use the object factory you simply write something like:

point=NewPoint();

and then use point as if it was a perfectly ordinary object literal, e.g.

var point=NewPoint();
point.setPoint(1,2);
alert(point.x);

Notice that the object factory NewPoint isn't an instance of NewPoint. It also isn't a class that is used to instantiate a point object. What it is, is an object which returns a reference to a new object that it has created.  This is a much more direct way to object creation than the class mechanism and much more suitable to a dynamic interpreted language like Javascript.

Also notice that an object factory can be a property of another object. That is you can have a master object in your project which provides all of the object factories it needs. This is the approach used by the Google Earth API for example which has lots of CreateObject methods.

Of course once we have an object factory we can use to to stamp out lots of instances of the object. For example:

var Points=new Array(10);
for(var i=0;i<10;i++){ 
 Points[i] = NewPoint ();
 Points[i].setPoint(i,i);
}
alert(Points[5].x);

Factory styles

There are other ways of writing an object factory other than to define everything within the object literal. For example you can do the complete job dynamically:

function NewPoint()
{
 var object={};
 object.x=0;
 object.y=0;
 object.setPoint= function(x, y){
   object.x = x;
   object.y = y
 }
 return object;
};

In this case we create and object literal and store a reference to it in object. After this we can add properties and methods in the usual way. At the end we return the reference to the object literal as before.

Notice that we don't use this in this case. The reason is that this has the usual context for a function call i.e. the global context as the function isn't a property of another object and therefore isn't called in the context of another object.

This dynamic style of object creation within a function is preferred by many programmers because it uses a more familiar syntax. For example, you can create and initialise simple properties using assignment. However the price of this syntactic simplicity is that you have to explicitly use the object reference in everything you define.

<ASIN:059680279X>

<ASIN:1430230541>

<ASIN:0321683919>

<ASIN:0596805527>