Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

What does "this" means

Status
Not open for further replies.
inbaron

inbaron

Programmer
Dec 9, 2002
22
0
0
US
My problem is this. I create a javascript object
that has a function associated with it. I instantiate this object and when it is instantiated, it assigns its function as an onclick handler to a div element on the page.

Here is a simple html that I created to demonstrate the problem:
----------------------------------------------------------
<html ><head>
<script>
function TestObject(container){
this.testVar = 'I am defined in TestObject';
document.getElementById('a').onclick=this.handler;
this.handler()
}
TestObject.prototype.handler = function(evt){
alert(this.testVar)
}
</script>
</head><body >
<div id ='a'>Click Me</div>
</body></html>
<script>var testObject = new TestObject();</script>
----------------------------------------------------------
When I display the page, this.handler is called at the time the object is constructed and correctly display in the alert message the value of this.testVar. However, when I click on the "Click Me" text, the handler method is called correctly but the alert message displays "undefined", this.testVar is not recognized.

If you drill into this further by adding the following loop into handler()

for(var k in this){
alert('this[\''+k+'\'] is ' + this[k])
}

you realize that when handler is called at the first time, "this" refers to TestObject while when it is called from the click, it refers to teh document object.

I thought that when a function is made a part of an object, any "this" inside it references the object, yet it looks now that it refernces the object from where the function is called. Why? How can I make the handler recognize its parent even when it is called from the click.

I need to make it work this way, what I am trying to do is much more complicated than this simplistic example.

Can anyone help?

Thanks
 
Sort by date Sort by votes
you're creating an arbitrary object but not storing a reference to it for later use.

here's one way to solve it:
Code: 
<html>

<head>
<script>
function TestObject(containerId){
   this.testVar = 'I am defined in TestObject';
   this.id = containerId;
   
   document.getElementById(this.id).onclick=this.handler;
   
   //  store a reference to this object
   store(this);
   
   this.handler();
}
TestObject.prototype.handler = function(evt){
	//  get the object from the ObjectStore
	var obj = window.ObjectStore[this.id];
	alert(obj.testVar);
}

function store(obj) {
	//  create the ObjectStore if it doesn't exist
	if (!window.ObjectStore) {
		window.ObjectStore = new Array();
	}
	//  store the object
	window.ObjectStore[obj.id] = obj;
}
</script>
</head>

<body >
 <div id ='a'>Click Me</div>
 <script>var testObject = new TestObject('a');</script>
</body>
</html>

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
Thank you so much. I did not know about the objectStore object and it's use. You have opened a new window :) of opportunity for me.
 
Upvote 0 Downvote
Another technique that I've seen is to store the reference to the object as a property of the DIV itself.
Code: 
<html>
<head>
<script>
function TestObject(containerId){
  this.testVar = 'I am defined in TestObject';
  this.id = containerId;
  
  document.getElementById(this.id).onclick=this.handler;
  [red]document.getElementById(this.id).obj=this;[/red]
}
TestObject.prototype.handler = function(evt){
  alert(this.[red]obj[/red].testVar);
}
</script>
</head>

<body >
 <div id ='a'>Click Me</div>
 <script>var testObject = new TestObject('a');</script>
</body>
</html>

Adam
 
Upvote 0 Downvote
Thank you so much. I did not know about the objectStore object and it's use.

Please note that there's no preexisting thing named 'objectStore'. This code is simply creating a new object in the domain model and calling it objectStore. You can do this anywhere in the DOM, quite legitimately, with any name. It's simply easier to store user objects in one of the root objects such as document or window for ease of global access. You could achieve the same effect with a global JS var definition - indeed these can be retrieved via the DOM also.
 
Upvote 0 Downvote
Thanks to all

Yes, my first response was before I really looked at the code and I missed the last function. In fact, I could not use that approach exactly because I had to assign the same handler to many elements. Instead, I decided to cache the reference to object itself on the document


function TestObject(){
document.myInstance = this;
.....
}

and then in all handler functions I use "document.myInstance" instead of "this" to refer to the object fields.

Thanks

Inbaron

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
68
gmmastros
gmmastros
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
63
ggriffit
ggriffit
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
121
JScannell
JScannell
jason.lex
  • Locked
  • Question
How do I edit this code to also count the checkboxes checked and total values
Replies
3
Views
74
jason.lex
jason.lex
javierdlm001
  • Locked
  • Question
Is this correct?
Replies
1
Views
36
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top