Why can deep nested function access top level vars?

Question

I've been doing some javascript reading, and I've gathered that a closure has access only to the closure "wrapping" it, or, you might say it's immediate parent. Now I've been playing a bit, and I see in this jsfiddle that even deep nested functions have access to to vars defined way up.

Can anyone please explain that? Or explain what have I got completely wrong?

http://jsfiddle.net/tPQ4s/

function runNums() {
    this.topVar = 'blah';
    return function(){
        (function() {                    
            (function() {
                console.log(topVar);
            })();
        })();
    }
}

var someFunc = runNums();
someFunc();

Yes, closure "closes around" the variables that it can see at all parent levels. — Max, Dec 25 '11 at 11:48
If you actually read that from somewhere, you might wanna stop reading materials that have blatant misinformation :P Of course it can access all parent levels. — Esailija, Dec 25 '11 at 11:55
See also http://stackoverflow.com/questions/1047454/what-is-lexical-scope. — helpermethod, Dec 25 '11 at 12:12
I would expect it to work this way just because that's also how scope works in general for nested functions/procedures in quite a wide variety of languages. If it didn't work this way also for closures it would be confusing. Or, to answer your question with two words: why not? — nnnnnn, Dec 25 '11 at 12:24

jAndy · Answer 1 · 2011-12-25T11:59:58.410

Without going too deep into the details, a closure technically describes a array like variable within the such called Activation Object that is handled from the javascript engine. An ActivationObject contains Variables declared by var, function declarations and formal parameters.

That means, anytime a new function (-context) is invoked, internally a new Activation Object is created. That object is part of the new Execution Context, a typicall EC looks like:

this context variable
Activation Object
[[Scope]]

The interesting part here is [[Scope]]. That variable contains all Activation Objects of all parent context and is filled when the EC is called. So now, when a function wants to access a variable, the name resolution process first looks into its own Activation Object, if nothing is found the search continues in the "Scope chain", which is just an Indexed search through our [[Scope]] variable (which again, is an array of parent contexts). Thats why we also speak a lot about "lexical scope" in ECMA-/Javascript.

^{Note: The above behavior is not described entirely, that would need several pages of text. Also it describes the ECMAscript3 262 specification. Things work a little different in ES5, but its still around the same thing}

score 5 · Accepted Answer · answered Dec 25 '11 at 11:51

That is because the chain runs further up to the top context.
In the example, that would be:

window < runNums < anonymous < anonymous < anonymous

Variables living in any of these will be available in the last anonymous function. In runNums, only variables living in runNums or window will be available. In the first anonymous function, only its variables and those living in runNums or window will be available, etc.

score 0 · Answer 3 · answered May 08 '17 at 23:21

0

The deep nested functions have not been executed. You did not return them for executing.

answered May 08 '17 at 23:21

Hieu Nguyen

1

Diode · Answer 4 · 2011-12-25T12:09:09.280

0

this is nothing but the Window object here.

Here runNums is a global function and runNums() is equal to window.runNums(). So this is window and this.topVar is window.topVar. Obviously it will be accessible from anywhere.

Try this and see the difference

var someFunc = new runNums();
someFunc();

edited Dec 25 '11 at 12:09

answered Dec 25 '11 at 12:01

Diode

24,570
8
40
51

Why can deep nested function access top level vars?

4 Answers4