Javascript Object Confusion...

Question

I've confused myself nicely here. My scenario is as follows.

function DesignPad() {  
 function EditBar() {  
  ...  
  this.removeHandler = function() {  
    **// how do I call Dragger.removeAsset**  
  }  
 }  
 function Dragger(){  
  ...  
  this.removeAsset = function() {}  
 }  
 this.init = function() {  
  this.editBar = new EditBar();  
  this.dragger = new Dragger();  
 }  
}  

var dp = new DesignPad();  
...

I can't seem to call Dragger.RemoveAsset. I understand the why, my question is how do I call it?

I'm trying to keep like-things separated (eg Dragger / EditBar) but I seem to get all sorts of mixed up in my event handlers. Any suggestions, good reading materials, etc on this stuff?

Thanks.

Answer 1

To me it just looks like you should refactor that code to make it simpler.

I think that your issue comes from the fact that a nested function is private, so you can't access it from outside.

Answer 2

Is an instance of Dragger a 'property' of your DesignPad object? If so, you could pass a reference to that object into your removeHandler() method.

Answer 3

I found Douglas Crockford's Javascript to be the best introduction to JavaScript. Especialy videos for Yahoo, like: The JavaScript Programming Language where you can learn how exactly are objects created and inherited in JS.

Solution to you problem is:

function DesignPad() {  
  var that = this;
 function EditBar() {  
  this.removeHandler = function() {  
    print("RemoveHandler");
    that.dragger.removeAsset();
  }  
 }  
 function Dragger() {  
  this.removeAsset = function() {
    print("RemoveAsset");
  }  
 }  
 this.init = function() {  
  this.editBar = new EditBar();  
  this.dragger = new Dragger();  
 }
}  

var dp = new DesignPad();
dp.init();
dp.editBar.removeHandler();

But as others noticed you could refactor some things :).

Answer 4

Try this:

function DesignPad() {  

 function EditBar(s) {  
  super = s;
  this.removeHandler = function() {
    alert('call 1'); 
    super.dragger.removeAsset();  
  }  
 } 


 function Dragger(s){
  super = s;  
  this.removeAsset = function() {
      alert('call 2'); 
    }  
 }  

 this.init = function() {  
  this.editBar = new EditBar(this);  
  this.dragger = new Dragger(this);  
 }  

}  

var dp = new DesignPad(); 
dp.init()
dp.editBar.removeHandler();
alert('end');