Topic awaiting preservation: Objects in Objects

Is it safe have objects that build other objects?

I'm mainly concerned with the use of the this keyword at the moment. If I use this inside an object costructor to set a property that I assign to yet another object constructor how is the this keyword treated within the object.object? Is it treated as if it were a reference to the top most level object like object.object as opposed to object.object (this refering to the bold object). Although I assume that this would only refer back to the most immediate return value: object.object but it just doesn't see to be working.

Confused yet? Cause I sure as hell am.

Does anyone know how this is is treated in this example or should I just avoid building objects from within object constructrs?

I think this works OK, it just messes with your head a bit. Like reading what you said, I had to go through it a few times!

As I understand it, "this" always refers to the current object you are "within". So "this" within the object.object constructor would refer to object.object, because that is all it "knows".

As far as I know (or unless there's some funky javascript parameter like object.parent or caller or something), objects in term of "this" only see themselves and "forward", not backward to parent objects etc.

Here's a thing I used in my recent Arkanoid project that has "nested" objects like you're doing, which use "this" syntax (I'm posting just the main object prototype for brevity)..

function LevelEditor() {
this.active = 1;
this.o = document.createElement('div');
this.o.style.position = 'absolute';
this.o.style.left = 0;
this.o.style.top = 0;
arkanoidBody.appendChild(this.o);
this.grid = new LEGrid(this.o);
this.map = new LEMap(this.o);
this.instructions = document.createElement('div');
this.instructions.innerHTML = this.instructionsHTML();
with (this.instructions.style) {
position = 'absolute';
left = 32;
top = 365;
width = 405;
}
this.o.appendChild(this.instructions);
this.toolbox = new LevelEditorToolbox(this.o);
this.toolbox.o.style.left = 32;
this.toolbox.o.style.top = 225;
this.toolbox.show();
this.typeCursor = new LETypeCursor(this.o);
this.setEventHandlers();
}

Anyways, this is instantiated as le = new LevelEditor(); or whatever, which instantiates a bunch of new objects stored within "le". Those objects use "this" all over the place and reference themselves inside of "le" - they don't reference "le" itself.

Apologies if this doesn't make sense, it's 1 AM on a Sunday and I'm at *work*



[This message has been edited by Scott (edited 01-19-2003).]

Yup, that's exactly the answer I was looking for. Thanks a heap.

I was just doing that very thing the other day, Drac. I built some objects with data and functions within another master object. I ran into the same problem of not knowing how this would work. I found that the this refers only to the object it is currently in just like Scott says. But I also needed to reference the parent object from the children. I found that "parent.whatever" worked just fine from the child.

. . : slicePuzzle

Hmm... Something still seems to be really really wrong here. It's should be wrong but it just ain't.

Gah! I've spent nearly 6 hours on this so far. Everything appears to be working flawlessly on the surface. I can read object properties from the master or master.childern objects easily enough, even through object references that eventually point back to a DOM property. The problem surfaces when trying to write a property for any object other than the last instance created.

I think it's related to the way I've been crossing between and through different object.function()'s on different levels. Maybe I've done my head in trying to follow all the invisible ties and pathways between the missmash of "this" and "that"!

Arrrgh!

Feck it. I've already started writing a second set of function and arrays to cut through the OO crap for now. If it all works then I'll either ditch the OO idea all togther or slowly try and work it back into the script when I finally start to understand how it all works.

Hours spent struggling with Javascript code and all sorts of frustrating behaviors... it's the good life.

Hah! Yeah, the more frustrating, the more rewarding it is when you finally figure out a workable solution.

Just before I found that using innerHTML() to write large ammounts of content into a page will crash Mozilla and Opera most of the time. I could have solved the problems with document.write but eh, what a headache. Instead I've finally started using the W3C endorsed way of adding content to a page though document.createElement() which both NN6+ and Opera7 seem to be quite happy with...

This little function helps speed up the process 10 fold:

function makeElement(tag,id,style) {

	e = document.createElement(tag)

	if (id) e.id = id

	if (style) {

		style = style.replace(/;\s*/gi,";").replace(/:\s*/gi,":").split(";")

		for (i=0;i<style.length;i++) {

			style[i] = style[i].split(":")

			eval("e.style."+style[i][0]+" = '"+style[i][1]+"'")

		}

	} 

	return e

}

Which lets me create new styled elements like so:

newDiv = ("DIV","MyDiv","position: absolute; top: 100px; left: 100px")
document.getElemntsByTagName("BODY").appendChild(newDiv)

If all I'd done today was that, I'd be happy.

As far as I know "this" always refers to the current scope. So when your code is currently in a chain of methods beloning to some object instance, "this" refers to that object. When setting an interval, the method is called globally, and then "this" refers to "window".
The weirdest thing is when you dynamically add event handlers to elements like:

// custom object scope

this.element = document.getElementById('elementId');

this.element.onmouseover = function() {

   this.  ...    // this refers to the element, not your object!

}

So if you'd want to refer to the object the element "belongs" to, something like this would work:

// custom object scope

this.element.obj = this;

this.element.onmouseover = function() {

   // above scope == this.obj;

}

and even weirder:

var scope = this;

this.element.onmouseover = function() {

   // scope var is available here == object scope

}

As for parent / child stuff in custom objects and nested custom objects, I usually just send the parent along to the child,

...

   this.subObject = new SubObject(this);

}



function SubObject(parent) {

   this.parent = parent;

}

anyway enough of that, but honestly, the scope of script is really something worth looking into more. "this" becomes more valuable with every new thing you find out.

*head begins to melt*

Ay... um.. Yah! I got yah.

Um.. wait... No I don't.

I think you'd just identified the problem I was having but I can't understand enough of it to be able to fix it. I seem t have a rather hazy grasp on programming terminology. I know how things work when I figure them out but I often have trouble pinning those concept to the correct terms. Although I sould be able to figure things out with a little bit of fiddle.play.learn

Thanks Clay -- and welcome to the Asylum.

Hmz,

Which reminds me I *still* have to finish my tutorial on OOP in JS :s. I was writing it for the GN. Anyways, though it's not finished yet, I think there's enough info in there already. So if you wanna have a peek: http://www.codewarrior.nl/~bladibla/js_oop/

I Hope it can be of some help, especially because I really aprreciate your kewl inventions.

Woohoo!!!

*scampers off too read stuff*