Better option for strongly-typed containers in javascript

Question

I've just discovered the way to create fake 'classes' in javascript, but I wonder how you can store them and still get easy access to their functions in an IDE.

Like this:

function Map(){
   this.width = 0;
   this.height = 0;
   this.layers = new Layers();
}

Now I've got a function that loops through an XML and creates multiple Map() objects. If I store them under a single variable, I can access them just fine, like:

map1 = new Map();
map1.height = 1;

But I don't know under what name they'll be stored! So I thought I could save them like this:

mapArray = {};
mapArray['map1'] = new Map();

But you can't access the functions like this: (At least the IDE code completion won't pick it up)

mapArray['map1'].height = 1;

I then thought this would be the best solution:

function fetch(name){
    var fetch = new Map();
    fetch = test[name];
}

That way I could write:

fetch('test').height = 1;

But this seems like it'll generate lots of overhead continuously copying variables like that.

Am I overlooking something simple?

Answer 1

The reason it doesn't work is that, in order for a map/array to allow anything inside it, it must assume only that the things inside are at most a very low-level thing on the inheritance tree. Unfortunately, unlike Vector<> and proxy objects in Actionscript, and similar things in other languages, this isn't easy to do in Javascript.

http://stackoverflow.com/questions/1711357/how-would-you-overload-the-operator-in-javascript

The solution you have, if that's what functionality you would like, is about the simplest you can do. You can also make a .get(whatever) function that returns what [whatever] is, but specifically as the type you want. And you can make a .set(whatever,value) as well. However, it won't stop the code from shoving things in using [].

On one hand, it's not a good idea to depend too heavily on the IDE to do this for you, but attempting to strongly-type things better is not a bad idea in and of itself.

Update:

To answer your other question... First, to easily test simple JS things, it's nice to use the command-line version:

http://blog.thefrontside.net/javascript/learning-javascript-from-the-command-line

https://developer.mozilla.org/en/SpiderMonkey_Build_Documentation

Now, I'm also not recommending you do this just to hack the IDE, but just to show "a way" to do it:

# js
js> function FooDataClass(){ this.data = "argh!"; }
js> function FooClass(){ this.get = GetStuff; this.put = PutStuff; this.stuff = new FooDataClass(); }
js> function PutStuff(name,stuff){ this[name]= this.stuff = stuff; }    
js> function GetStuff(name){ return this.stuff = this[name]; }     
js> f = new FooClass()       
[object Object]
js> f.put('bar', new FooDataClass())       
js> f.get('bar')    
[object Object]
js> f.get('bar').data
argh!
js> 

This might fake out your IDE for you.