Javascript `this` not working as I thought?

Question

I'm adapting a pretty basic js function into a class. Anyway, basically it just creates a floating container above the main page. I'm aware it's incomplete, but I'm in the middle of typing it up, and keep getting caught out when attempting to call the close() function. Firefox returns a this.sdiv is undefined. I'm confused as to how this can be the case when close() is Pop's method and sdiv is defined in the first line of the Pop class?

function Pop( wpx,hpx ){

  Pop.prototype.sdiv;
  Pop.prototype.shadow;
  Pop.prototype.pdiv;

  // start with the invisible screen, which
  // covers the main page
  this.sdiv = document.createElement("DIV")
  this.sdiv.className = "popScreen";
  this.sdiv.id = "popScreen";
  // this screen covers the full document, so 
  // base dimensions on the document size
  this.sdiv.style.width = document.body.clientWidth + "px";
  this.sdiv.style.height = document.body.clientHeight + "px"; 
  document.body.appendChild( this.sdiv );

  // attach drop shadow
  this.shadow = document.createElement("DIV");
  this.shadow.className = "popShadow";
  this.shadow.style.width = wpx + "px";
  this.shadow.style.height = hpx + "px";
  this.shadow.style.left = ( ( window.innerWidth / 2 ) - ( wpx / 2 )  ) + "px";
  this.shadow.style.top = ( ( window.innerHeight / 2 ) - ( hpx / 2 ) ) + "px";
  document.body.appendChild( this.shadow );

  this.pdiv = document.createElement("DIV");
  this.pdiv.className = "pop";
  this.pdiv.id = "pop";
  this.pdiv.style.position = "absolute";
  this.pdiv.style.width = wpx + "px";
  this.pdiv.style.height = hpx + "px";
  this.shadow.appendChild( this.pdiv );

  // bind an event to the screen div so that when it is clicked
  // the Pop dialogue is closed and the user is return to the main page
  $("div#popScreen").click( function( ){
    Pop.prototype.close( );
  } );

  Pop.prototype.go = function( url, method, data ){ 
    if( method == null )
      $("div#pop").load( url );
  }

  Pop.prototype.close = function( ){
      this.sdiv.parentNode.removeChild( this.sdiv );
      this.shadow.parentNode.removeChild( this.shadow );
      this.pdiv.parentNode.removeChild( this.pdiv );
  }

}

Thanks in advance for any help

Answer 1

You can't use Pop.prototype.close() to close all Pop instances. Instead, for each instance of Pop that you have created with the new operator, you need to call popInstance.close().

Answer 2

this in javascript works very differently to this in oo languages.

The error you have is here:

  Pop.prototype.close = function( ){
      this.sdiv.parentNode.removeChild( this.sdiv );
      this.shadow.parentNode.removeChild( this.shadow );
      this.pdiv.parentNode.removeChild( this.pdiv );
  }

In that function this is probably referring to the window (set a breakpoint and have a look in firebug)

Perhaps something along these lines will work.

 var parent = this;
 Pop.prototype.close = function(){
      parent.sdiv.parentNode.removeChild( this.sdiv );
      parent.shadow.parentNode.removeChild( this.shadow );
      parent.pdiv.parentNode.removeChild( this.pdiv );
  }