Confused with 'prototype' (Firefox extension)

Question

I am developing a firefox extension, and I think that now I have gotten into a major misunderstanding regarding Javascript, with the concept of 'prototype' to be exact. Consider the following minimal example: note the differences when setting this.demo and this.test variables:

var Example = new Array(); Example.Foo = function() { this.test = null; this.demo = "World"; }; Example.Foo.prototype = { initialize : function(resource) { this.test = "Hello"; this.display(); }, display : function() { alert(this.test + " " + this.demo); }, } window.addEventListener( "load", function() { window.obj = new Example.Foo(); obj.initialize(); }, false ); 

When I open Firefox, I get the expected result:

  Hello World 

This always works so well as long as the call () 'inside' of the js source file is displayed. However, when I call display () via the appropriate click from a menu entry, for example:

 ... <menupopup id="menu_ToolsPopup"> <menuitem label="Example" oncommand="obj.display();"/> </menupopup> ... 

I get:

  null World 

initialize () was called beforehand, of course.

I am still new to Javascript and am working with existing code. Therefore, I am very confused by the current behavior. What are the best working solutions?

Answer 1

Because this refers to the object that calls the method.

 var MyObject= new function(){ this.value="Hello World!"; this.display=function(){ alert(this.value); } } <input type="button" value="Foo Bar!" onclick="MyObject.display()"> //Foo Bar! 

this example will warn "Foo Bar!" instead of "Hello World!"

to prevent unforeseen situations, you can add a “breakpoint” using var that=this;

 var MyObject= new function(){ var that=this; // <--- reference to actual object this.value="Hello World"; this.display=function(){ alert(that.value); } } <input type="button" value="Foo Bar!" onclick="MyObject.display()"> //Hello World! 

this will warn "Hello World!" the "value" from the MyObject, not the "value" of the tag.

.

Perhaps this other situation will help you understand.

 <img scr="dog.gif" title="Little Dog" onclick="alert('This is a '+this.title)"> 

"This is a little dog."

Answer 2

After many hours, I solved my problem ... anyway, I still do not fully understand.

Firstly, a minimal example really works. I have weird behavior because I included example code lines in the application code. However, a "deep down" error occurred in the code that encountered the initialize () call. When I put example code lines in front of the application code, I always get the output of "Hello World" (instead of "null World" in one case)

Secondly, the application had a fundamental flaw. This is a Firefox extension with sidebar. At the same time, window.addEventListener(...) is called twice, once for the sidebar, once for the "normal" browser window. So I had two separate window.obj . And the code calls initialize() only for the sidebar. In 99%, this was not a problem, since most codes use the sidebar window.obj . However, the call from the context menu is for the browser window.obj . As a solution, I changed the code to use only the sidebar window.obj .

Sorry for looking in the wrong direction. Thank you very much for all the answers. Your comments got back on track and definitely kept me motivated! :)

Christian