By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,600 Members | 1,861 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,600 IT Pros & Developers. It's quick & easy.

general prototype question

P: 6
I'm trying to understand how the prototype property works, but there is one thing I donť get:
As far as I've got it, when I have one custom object with some methods and properties, all instances of this object point to its definition without copying (as the object was constructed with 'this'). To make it more clear what I mean (simplified):
Expand|Select|Wrap|Line Numbers
  1. // obj definition
  2. myObject  
  3. myObject.prototype.method
  4. myObject.prototype.property // this is probably clear, those are just variables
  5. // now instances:
  6. aa = myObject
  7. aa.method
  8. bb = myObject
  9. bb.method
  10. cc = myObject
  11. cc.method
Now assuming all of the instances point to the same method, is there a way to make them work independently? Again to make it more clear, let's say I have a timer object defined (with a prototype method for interval). I add two instances of the timer object to a page and I want them to work independently, just as they do not know of each other. It works okay when I use 'this' instead of prototype for the interval method, but when I use prototype, it seems to be broken (only the second instance counts). Is it because the both instances point to the same method and this feature just cannot be used this way? I could not find any relevant answer to this.

I also apologize, the question may be confusing and my english is not that good.
Thank you.
Jul 22 '08 #1
Share this Question
Share on Google+
5 Replies


gits
Expert Mod 5K+
P: 5,343
the 'classical' way is the following:

Expand|Select|Wrap|Line Numbers
  1. function myObject() {
  2. }
  3.  
  4. myObject.prototype.method = function() {
  5.     // some code
  6. }
  7.  
  8. // new instance
  9. var o = new myObject;
  10. o.method();
  11.  
  12. var o_1 = new myObject;
  13. o_1.method();
so every instance is 'independent' from each other ... the way you used it just made references to the same object ...

kind regards
Jul 23 '08 #2

P: 6
the 'classical' way is the following: ...
Thanks for your reply. I wanted the 'code block' in the initial post to look more like a diagram, not an actual source code (apparently, that was a bad idea). I'll show you the whole code, as it might explain what I really want to know (commented, HTML excluded, there are probably some stupid things, as I learn, but it works):

Expand|Select|Wrap|Line Numbers
  1. function Timer(TimerInputID) { 
  2.     this.HH = '00'; 
  3.     this.MM = '00';
  4.     var HH = this.HH, MM = this.MM;
  5.     this.TimerInput = document.getElementById(TimerInputID).appendChild(document.createTextNode(HH + ':' + MM)); 
  6.  
  7.  
  8.     Timer.prototype.Start = function() { 
  9.     var that = this;
  10.         this.TimerRunning = setInterval(function() {that.count();}, 200);
  11.     };
  12.  
  13.     this.count = function() { // if I use Timer.prototype.count here, it becomes broken, when more than one instances of the Timer are used, why?
  14.         if (MM < 59) { MM++;     
  15.             if (MM < 10) { MM = '0' + MM; } else { MM; }
  16.         } else { MM = '00'; HH++;
  17.             if (HH < 10) { HH = '0' + HH; } else { HH; }
  18.         }
  19.         this.TimerInput.nodeValue = HH + ':' + MM;
  20.     };
  21.  
  22.     Timer.prototype.Stop = function() {
  23.         this.TimerRunning = clearInterval(this.TimerRunning); 
  24. }
  25.  
  26. // and there is a Timer.prototype.button, to Start/Stop the Timer, that works ok, it is meant to be used every time as an optional sub-object, as I might want to run the timer under other circumstances than clicking a button. So I guess there is no need to show that...
  27.  
  28. var aa = new Timer('timerInput');
  29. aa.ctrlButton('timerControl');
  30. var bb = new Timer('timerInput2');
  31. bb.ctrlButton('timerControl2');
I could probably leave it as it is and forget. But I would like to know why 'Timer.prototype.count' cannot be used that way instead of 'this.count'. It just does not make any sense to me.

Thanks for your patience :)
Jul 23 '08 #3

gits
Expert Mod 5K+
P: 5,343
the problem is the setInterval where you just loose the execution context again ... you may fix that with:

[HTML]<html>

<script type="text/javascript">

function Timer(TimerInputID) {
this.HH = '00';
this.MM = '00';
this.TimerInput = document.getElementById(TimerInputID);

this.TimerInput.value = this.HH + ':' + this.MM;
}

Timer.prototype.start = function() {
var me = this;

var cb = function() {
me.count.call(me);
};

this.TimerRunning = setInterval(cb, 200);
}

Timer.prototype.count = function() {
if (this.MM < 59) {
this.MM++;

if (this.MM < 10) {
this.MM = '0' + this.MM;
} else {
this.MM;
}
} else {
this.MM = '00';
this.HH++;

if (this.HH < 10) {
this.HH = '0' + this.HH;
} else {
this.HH;
}
}

this.TimerInput.value = this.HH + ':' + this.MM;
}

Timer.prototype.stop = function() {
this.TimerRunning = clearInterval(this.TimerRunning);
}


function init() {
var aa = new Timer('timerInput');
aa.start();
}

function start_t2() {
var bb = new Timer('timerInput2');
bb.start();
}

</script>

<body onload="init();">
<input type="text" id="timerInput"/>
<input type="text" id="timerInput2"/>
<input type="button" value="start_t2" onclick="start_t2();"/>
</body>
</html>
[/HTML]
i just organized the code a little bit so when having a look at it you could trace a little bit better how it works. the call()-method calls the function with the correct execution-context ...

kind regards
Jul 23 '08 #4

P: 6
the problem is the setInterval where you just loose the execution context again ...
That's it! Thank you very much!
Jul 23 '08 #5

gits
Expert Mod 5K+
P: 5,343
no problem ... post back to the forum anytime you have more questions :)

kind regards
Jul 23 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.