Class design question

[Gullanian]

I'm new to writing objects in Javascript, one problem I keep having is how to identify dynamically created elements in a class.

IE, I have an object 'Grid' that creates a table on the page.

There should be support for multiple instances of grid.

The grid object sets the inner html of a canvas div to add in the table HTML. The grid object then has a variable in it that is set to the tables ID.

Without passing in a unique ID for the table into the object, how can the object automatically generate a unique ID for each table?

[3Nex]

By using a global variable inside the class constructor. The global variable can store the last used id and every new object will set it's id to the incremented value of that last used id.

In javascript, which has the silliest ever way of writing classes, it would look something like this: http://turcin.net/javascript/object-constructor.html

Does that work for you?

[Gullanian]

That's what I thought, thanks!

I also had an idea where you could have a container object, like gridGroup which maintains an array of the grid objects, using array index as the identifier, with functions to remove and add grids from it's array.

[thraddash]

You could also just keep the element references in your objects. Then you do not need any ID's.

For example...

function Grid()
{
	this.base = null;

	this.initialise = function()
	{
		var self = this;

		this.base               = document.createElement('div');
		this.base.innerHTML     = 'Click Me!';
		this.base.onclick       = function() {self.clicker();};
		this.base.style.cssText = 'border: solid 1px black; padding: 10px;';

		document.body.appendChild(this.base);
	};
	
	this.clicker = function()
	{
		this.base.innerHTML += '<br />You Clicked Me! ' + new Date().getTime();
	};

	this.initialise();
}

<input type="button" onclick="new Grid();" value="New Object" />

[NicTlt]

In javascript, which has the silliest ever way of writing classes

Possibly due to the fact there are no "classes" in javascript?

Another way to assign a unique ID is to create the Grid objects with a closure:

    var Grid = (function () {
        var _currentID = 0;
        return function () {
            return {
                gridID: _currentID++,
                addTable: function () {
                    foo(this.gridID);
                    bar();
                }
            }
        }
    }());

Err... yes, OK the syntax is pretty grim

[3Nex]

Possibly due to the fact there are no "classes" in javascript?

How is that a fact? We're working with classes throughout this whole thread o.O

[NicTlt]

https://developer.mozilla.org/en/Cor...de/Inheritance

JS is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.

http://www.ecma-international.org/pu...ber%201999.pdf

ECMAScript does not contain proper classes such as those in C++, Smalltalk, or Java, but rather,
supports constructors which create objects by executing code that allocates storage for the objects and
initialises all or part of them by assigning initial values to their properties. All constructors are objects,
but not all objects are constructors. Each constructor has a Prototype property that is used to implement
prototype-based inheritance and shared properties. Objects are created by using constructors in new
expressions; for example, new String("A String") creates a new String object. Invoking a
constructor without using new has consequences that depend on the constructor. For example,
String("A String") produces a primitive string, not an object.
ECMAScript supports prototype-based inheritance. Every constructor has an associated prototype, and
every object created by that constructor has an implicit reference to the prototype (called the object’s
prototype) associated with its constructor. Furthermore, a prototype may have a non-null implicit
reference to its prototype, and so on; this is called the prototype chain. When a reference is made to a
property in an object, that reference is to the property of that name in the first object in the prototype
chain that contains a property of that name. In other words, first the object mentioned directly is
examined for such a property; if that object contains the named property, that is the property to which
the reference refers; if that object does not contain the named property, the prototype for that object is
examined next; and so on.
In a class-based object-oriented language, in general, state is carried by instances, methods are carried
by classes, and inheritance is only of structure and behaviour. In ECMAScript, the state and methods are
carried by objects, and structure, behaviour, and state are all inherited.

[3Nex]

Oh... okay then.

[NicTlt]

I can probably tidy my example up a bit, after some more thought:

var Grid = (function () {
    var _currentID = 0;
    return function () {
        this.gridID = _currentID++;
    }
}());

Grid.prototype.addTable = function () {
    foo(this.gridID);
    bar();
}

[NicTlt]

Oh... okay then.

Yes, sorry, I'm VERY pedantic