How do I access the object instance from within class

[wilkinson.philip]

I have a javascript object which dynamically generates a table adding,
deleting and moving rows as the user clicks on buttons or links.
Problem is when I generate a table row and add the javascript method
call to my class, I have to put the object instance name variable of
the class in order for it to be called from the onclick=functio n().
This is seriously limiting, but I'm stuck for a way round it. Heres a
edited of the code so you get the idea....

Instantiating the object :-

var dtl = new DynamicTableLis t("table1", $
{myObject.allFi eldsAsJavaScrip tArray}, true, true, true);
My javascript class DynamicTableLis t, note the dtl javascript object
instance variable being referred to in the addRow function. How can I
avoid this???

function DynamicTableLis t(thisObjName, tableName, options, showDelete,
showUp, showDown)
{
this.processRow = function(r, row, up, down)
{
...
};

this.processRow s = function()
{
...
};

this.getVisibil ity = function(visibl e)
{
...
};

this.delRow = function(button )
{
...
};

this.addRow = function(select ion)
{
...

if (showDelete)
{
var cell2 = document.create Element('TD');
var inp2 = document.create Element('IMG');
/
*************** *************** *************** *************** *************** *************** *******/
inp2.onclick=fu nction(){dtl.de lRow(this);} // Have to specify
dtc!!!!!!!!
/
*************** *************** *************** *************** *************** *************** *******/
inp2.title='Del ete';
inp2.alt='Delet e';
inp2.src='image s/delete.gif';
cell2.appendChi ld(inp2);
row.appendChild (cell2);
}

...

tbody.appendChi ld(row);

this.processRow s();
};

this.moveRow = function(node, vector)
{
};
}

Obviously the code dtl.delRow(this ); is being dynamically generated,
but how do I replace the dtl instance name with something that'll work
whatever the user of this class calls the instance of it!

Cheers, in advance for any help.
Philip Wilkinson.

[Peter Michaux]

On Apr 22, 8:08 am, wilkinson.phi.. [e-mail] wrote:

I have a javascript object which dynamically generates a table adding,
deleting and moving rows as the user clicks on buttons or links.
Problem is when I generate a table row and add the javascript method
call to my class, I have to put the object instance name variable of
the class in order for it to be called from the onclick=functio n().
This is seriously limiting, but I'm stuck for a way round it. Heres a
edited of the code so you get the idea....

Instantiating the object :-

var dtl = new DynamicTableLis t("table1", $
{myObject.allFi eldsAsJavaScrip tArray}, true, true, true);

My javascript class DynamicTableLis t, note the dtl javascript object
instance variable being referred to in the addRow function. How can I
avoid this???

function DynamicTableLis t(thisObjName, tableName, options, showDelete,
showUp, showDown)
{
this.processRow = function(r, row, up, down)
{
...
};

this.processRow s = function()
{
...
};

this.getVisibil ity = function(visibl e)
{
...
};

this.delRow = function(button )
{
...
};

this.addRow = function(select ion)
{
...

if (showDelete)
{
var cell2 = document.create Element('TD');
var inp2 = document.create Element('IMG');
/
*************** *************** *************** *************** *************** *************** *******/
inp2.onclick=fu nction(){dtl.de lRow(this);} // Have to specify
dtc!!!!!!!!
/
*************** *************** *************** *************** *************** *************** *******/

I think you want to change the content between the asterisks to the
following two lines.

var thisC = this; // 'this' refers to the instance of DynamicTableLis t
inp2.onclick = function() {thisC.delRow(t his);}; // 'this' referes to
the HTML element that was clicked

The issue here is closures and the binding of the 'this' keyword which
is tricky at first in JavaScript. The 'thisC' variable holds a
reference to the dynamic table list instance. The 'this' in the second
line is resolved at runtime and so point to the HTML element that was
clicked.

If I remember correctly, I heard Brendan Eich, creator of JavaScript,
say that in JavaScript 2.0 the binding of "this" in inner functions
will be the same 'this' as the outer functions. That would mean no
need for the 'thisC' technique above. This will be a backwards
incompatible change and doesn't sound like a good move to me. For
example, how to write the second of the lines I wrote above so that
when delRow() runs it has a reference to the HTML element that was
clicked? It isn't necessarily possible to get it from the event object
because the event's target is the most deeply nested element in DOM
that received the click.

I don't know if the following discusses the 'this' keyword but it is
an article about closures in general

<URL: http://www.jibbering.c om/faq/faq_notes/closures.html>

Peter

[wilkinson.philip]

Thanks Peter, that worked perfectly and makes total sense.
Cheers, Philip Wilkinson.