StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Welcome to the world of closures. You are right to sense what you feel to behave as if it's a global but not quite global. That's how closures behave.</p> <p>Basically in javascript when a function returns not all local variables are necessarily garbage collected/freed like in Java or C. If there is a reference to that variable then that variable survives in the scope of the function where it is defined.</p> <p>Technically the mechanics are different and some people try to explain it that way and end up confusing a lot of other people. To me, closures are a sort of 'private' global variables in that like globals, they are shared accross functions but they are not declared in the global scope. It's just like what you describe feeling upon encountering this feature.</p> <p>Here are some of my other answers here on stackoverflow related to javascript closures which I believe are worth reading:</p> <p><a href="https://stackoverflow.com/questions/61088/hidden-features-of-javascript/2047391#2047391">Hidden Features of JavaScript?</a></p> <p><a href="https://stackoverflow.com/questions/3572480/please-explain-the-use-of-javascript-closures-in-loops/3572616#3572616">Please explain the use of JavaScript closures in loops</a></p> <p>Or you can just google the phrase "javascript closure" to explore the subject.</p> <hr> <p>Additional answer.</p> <p>As for the explanation of why <code>this</code> works in your code (as opposed to *cough* attempting to correct your code so that <code>this</code> would work even though it works in the uncorrected version *cough* ;-):</p> <p>Javascript has late bindings. Very late, very-very late. Not only is <code>this</code> not bound during compile time, it is not even bound during run time. It is bound at execution time - that is, until a function is called you can't know what this really points to. The caller basically gets to decide what the value of <code>this</code> is, not the function where <code>this</code> is used.</p> <p>Some funky javascript late binding maneuvers:</p> <pre><code>function foo () { alert(this.bar); } var bar = "hello"; var obj = { foo : foo, bar : "hi" }; var second_obj = { bar : "bye" }; foo(); // says hello, 'this' refers to the global object and this.bar // refers to the global variable bar. obj.foo(); // says hi, 'this' refers to the first thing before the last dot // ie, the object foo belongs to // now this is where it gets weird, an object can borrow/steal methods of // another object and have its 'this' re-bound to it obj.foo.call(second_obj); // says bye because call and apply allows 'this' // to be re-bound to a foreign object. In this case // this refers to second_obj </code></pre> <p>In your code, <code>this</code> conveniently refers to the object invoking the function as its method which is why it works even though you are apparently <strong>not</strong> using supposedly <em>correct</em> constructor syntax.</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