JavaScript has a wonderful approach to objects but it can sometimes go wrong. See if you can work out the reason for the problem in this Programmer Puzzle.

Background

JavaScript has a really interesting approach to objects and it works great most of the time. However if you come from another language background, or if you don't study how it works in enough detail, then you can find that treating it in a "classical" style might produce strange results.

A great deal of the burden of implemented objects is carried by the this operator which looks a lot like the this or me operator that you find in other object-oriented languages such as C# C++ and so on... but it isn't quite the same.

The reason is that JavaScript doesn't make use of classes, i.e. it isn't a class-based object-oriented language. In JavaScript objects are fundamentally created as literals which is fine as long as you only want a singleton object. For example:

myObject={myVariable:0,myStriing:"Hello"};

but how do you get another instance of myObject?

To allow programmers to create multiple instances JavaScript has the constructor mechanism which is aimed at making it easy for a function to create object instances.

For example:

function MyObject(){ this.myVariable=0; this.myString="Hello";}

And to make use of the constructor you write

myObject1=new MyObject();myObject2=new MyObject();

The key point here is that the MyObject constructor generates two object litterals when called with new - one referenced by myObject1 and the other by myObject1. This works because of the use of this. When used in a constructor function this is set to reference the object literal being constructed. In other words the constructor above is equivalent to:

So far so simple. Next another object was created which accepted a reference to a function which it then called to get a job done. To make this simpler we can just use a varible to reference the function:

show=function(){ alert("test message");};

var methodpointer=show;methodpointer();

which works perfectly. This sort of statement occurs when ever you set an event handler for example or a callback function but hidden inside some complex code or object. Essentially the idea is to keep a reference to a function which can then be used to call the function at a later date.

Next the show function was refactored into an object, as shown earlier and the function reference code became: