StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your class structure is perfectly valid. However, if your <code>handleChange()</code> function uses the <code>this</code> keyword, expecting <code>someVar</code>, then that is where your problem lies.</p> <p>This is what happens:</p> <ol> <li><code>SWFAddress.addEventListener(SWFAddressEvent.CHANGE, this.handleChange);</code> correctly references the handler function within the class. SWFAddress caches that function to some variable <code>f</code> until the event is dispatched.</li> <li>When the event is dispatched, SWFAddress calls <code>f</code>. While the reference to the function is preserved, the reference to the context, or <code>this</code>, is not. Therefore <code>this</code> defaults to <code>window</code>.</li> </ol> <p>To get around this, you simply need to use an anonymous function that captures the variables within the class scope. You can call the handler with the correct context from within this anonymous function:</p> <pre><code>function SomeClass() { this.initializeSWFA = function() { // Save a reference to the object here var me = this; // Wrap handler in anonymous function SWFAddress.addEventListener(SWFAddressEvent.CHANGE, function (evt) { me.handleChange(evt); }); } //SWFAddress suppose to call this function this.handleChange= function(evt) { //some code here } } </code></pre> <h2>An explanation of <code>this</code>, as requested by the OP:</h2> <p>The <code>this</code> keyword can be explained in different ways: take a read of firstly <a href="http://www.digital-web.com/articles/scope_in_javascript/" rel="noreferrer">this article about scope</a>, and then <a href="http://www.crockford.com/javascript/private.html" rel="noreferrer">this article about object-oriented javascript</a>.</p> <p>I'd like to throw in my quick reasoning too, which you may find helpful. Remember that Javascript doesn't have "classes" as languages such as Java do. In those languages, a "method" of a class belongs only to that class (or could be inherited). In javascript however, there are only objects, and object properties, which can happen to functions. These functions are free agents -- they don't <em>belong</em> to one object or another, just like strings or numbers. For example:</p> <pre><code>var a = { myMethod: function () {...} }; var b = {}; b.myMethod = a.myMethod; </code></pre> <p>In this case, which object does <code>myMethod</code> belong to? There is no answer, it could be either <code>a</code> or <code>b</code>. Therefore <code>a.myMethod</code> is simply a reference to a function, disassociated from the "context", or parent object. Therefore <code>this</code> has no meaning unless it is <strong>called</strong> explicitly using <code>a.myMethod()</code> or <code>b.myMethod()</code>, and thus defaults to <code>window</code> when called in any other way. It is for the same reason that there is no such thing as a <code>parent</code> or <code>super</code> keyword in javascript.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload