general prototype question

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jirkap
    New Member
    • Jul 2008
    • 6
    #1

    general prototype question

    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):
    Code:
    // obj definition
myObject  
myObject.prototype.method
myObject.prototype.property // this is probably clear, those are just variables
// now instances:
aa = myObject
aa.method
bb = myObject
bb.method
cc = myObject
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.
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      the 'classical' way is the following:

      [CODE=javascript]function myObject() {
      }

      myObject.protot ype.method = function() {
      // some code
      }

      // new instance
      var o = new myObject;
      o.method();

      var o_1 = new myObject;
      o_1.method();[/CODE]
      so every instance is 'independent' from each other ... the way you used it just made references to the same object ...

      kind regards

        Comment

        • jirkap
          New Member
          • Jul 2008
          • 6
          #3
          Originally posted by gits
          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):

          Code:
          function Timer(TimerInputID) { 
	this.HH = '00'; 
	this.MM = '00';
	var HH = this.HH, MM = this.MM;
	this.TimerInput = document.getElementById(TimerInputID).appendChild(document.createTextNode(HH + ':' + MM)); 

	
	Timer.prototype.Start = function() { 
	var that = this;
		this.TimerRunning = setInterval(function() {that.count();}, 200);
	};

	this.count = function() { // if I use Timer.prototype.count here, it becomes broken, when more than one instances of the Timer are used, why?
		if (MM < 59) { MM++; 	
			if (MM < 10) { MM = '0' + MM; } else { MM; }
		} else { MM = '00'; HH++;
			if (HH < 10) { HH = '0' + HH; } else { HH; }
		}
		this.TimerInput.nodeValue = HH + ':' + MM;
	};
	
	Timer.prototype.Stop = function() {
		this.TimerRunning = clearInterval(this.TimerRunning); 
}
	
// 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...

var aa = new Timer('timerInput');
aa.ctrlButton('timerControl');
var bb = new Timer('timerInput2');
bb.ctrlButton('timerControl2');
          I could probably leave it as it is and forget. But I would like to know why 'Timer.prototyp e.count' cannot be used that way instead of 'this.count'. It just does not make any sense to me.

          Thanks for your patience :)

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              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(TimerInpu tID) {
              this.HH = '00';
              this.MM = '00';
              this.TimerInput = document.getEle mentById(TimerI nputID);

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

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

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

              this.TimerRunni ng = 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.TimerRunni ng = clearInterval(t his.TimerRunnin g);
              }


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

              function start_t2() {
              var bb = new Timer('timerInp ut2');
              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

                Comment

                • jirkap
                  New Member
                  • Jul 2008
                  • 6
                  #5
                  Originally posted by gits
                  the problem is the setInterval where you just loose the execution context again ...
                  That's it! Thank you very much!

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5390
                      #6
                      no problem ... post back to the forum anytime you have more questions :)

                      kind regards

                        Comment

                        Previous template Next
                        Working...