SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Solved: This keyword confusion

    Hi everyone,

    I am creating an bject, and inside one of that objects methods, it attaches a different method to an event. My problem is the "this" keyword and how I keep my methods pointing to the correct place. Cany anyone shed some light please?

    Code:
    function Open()
    {
      this.pWindow = window.open('','Window Title','width=400, height=300, resizable=no, scrollbars=no, toolbar=no, location=no, directories=no, status=yes, menubar=no, copyhistory=no');
    }
    
    function Populate()
    {
      var pW = this.pWindow;
      var pD = pW.document;
    
      pD.open();
      pD.writeln(this.base); //Test WriteLine
      pD.close();
    }
    
    function Go()
    {
      var el = document.getElementById(this.launcher);
    
      el.onclick = this.Launch;
    }
    
    function Launch()
    {
      this.Open();
      this.Populate();
    }
    
    function DTObject(base, launcher)
    {
      this.base = base;
      this.launcher = launcher;
      this.Go = Go;
      this.Launch = Launch;
      this.Open = Open;
      this.Populate = Populate;
      
      var pWindow = '';
    
      this.Go();
    }
    What I want, is that once the DTObject has been created var dt = new DTObject(baseElementID, launcherElementID);, the constructor calls the Go() function, which attaches the Launch() function to the element in question. I have always had a bit of trouble regarding the "this" keyword and events, even after reading as much reference material as possible.

    The problem is that the this keyword in the Go() function is pointing to the HTML Element I am attaching the event to, not my object.

    Regards,
    Jordan
    Last edited by J Windebank; Sep 13, 2006 at 16:20. Reason: Problem solved

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jordan

    The problem is the following statement:
    Code:
      el.onclick = this.Launch;
    el.onclick is assigned a reference to the function Launch. When el.onclick() is called, this == el, as you have seen. In fact, any time we have an expression like this: myObject.myFunction(), then myFunction will be called and this will equal myObject. So you can see why this == el in your event handler.

    Perhaps this demo and this demo will be helpful.

    Edit:


    I don't know where I was going with the following. It's obviously beneath your level of experience. Skip it and just check out the second demo above :-)


    You probably know all this, but I will go ahead and post it in the hopes that it might help someone else:

    When the new keyword is applied to a function, an object is created. That object is called an instance. There can be many instances of the prototype (in OOP languages we'd call this a class but in JS it is an object prototype). In the code inside the function, this points to the instance object. For example...
    Code:
    01:  function Car(color) // Object Prototype
    02:  {
    03:    this.color = color;
    04:  }
    05:  window.onload = function()
    06:  {
    07:    var car1 = new Car('red');
    08:    var car2 = new Car('blue');
    09:    alert(car1.color);
    10:    alert(car2.color);
    11:  };
    On lines 7 and 8 we create two instances of the Car prototype. When line 7 is executed we might say that a copy of Car is made and placed in its own memory location. The this variable is then assigned a reference to that copy and then the code within Car is executed. Finally, a reference to the copy is then assigned to the variable car1. The same process is repeated when line 8 is executed. The variable car2 will eventually be assigned a reference to its own copy of Car.

    When the code within Car is executed, this will point to an instance object - it will point to a copy of Car. That copy will either be for car1 or for car2 - they are different copies of the prototype. Line 3 adds a new property to that instance object and assigns a value to it.

    Technically, it is not entirely correct to speak of instance objects as copies of an object prototype. But I think it is a good analogy.

    Now consider line 9. The expression car1.color accesses the color property of a specific instance object: car1. Since car1 is a copy of Car then its color property can have a different value than car2.color because car2 is a different copy of Car.

    ...sorry, have to go do something. be back later...
    Last edited by MikeFoster; Sep 12, 2006 at 23:22.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by J Windebank
    I am creating an bject, and inside one of that objects methods, it attaches a different method to an event. My problem is the "this" keyword and how I keep my methods pointing to the correct place. Cany anyone shed some light please?
    You might want to read this article on Javascript scope - I think it answers all your questions.

  4. #4
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike, thank you. I was getting myself confused due to the fact that in this particular project I will only be instancing one version of my object. I can see how the "this" keyword changes based on the context, and how when being used in events changes things. Thanks you for the explanation.

    Buddy Bradly, funny enough I had read that link only two days ago but could not think for the life of me where I'd found it. Thanks you so much, I have succesfully created a bind prototype function and all is working perfectly.

    Kind regards,
    Jordan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •