Why do new invocations of this function create new scope chains and a new private variables?

Question

If we have this basic function (and its closures):

function counter(){
    var n = 0;
    return {
        count: function() {return n++},
        reset: function() {n = 0}
    };
}

Is this what's happening in memory? (basically a pointer to a function object and its scope chain)
_{(source: geraldleroy.com)}

Is the above diagram correct? If so, I'm not understanding why these two lines of code create two new scope chains and new private variables:

var c = counter();

var d = counter();

It seems like both c and d would refer to the original function object and would use its scope chain.

I'm a little confused and would appreciate any insight on this that anyone can offer.

Thanks!

Answer 1

Java script is 'lexically scoped'. This means that they run in the scope in which they are defined, not the scope from which they are executed. You define 2 variables definitions that get the object returned by the function, hence you get 2 scopes.

Answer 2

Scope chains do not really apply here. Look up 'execution context' and 'activation object' to understand what is happening when a function is invoked. See the brief summary of these concepts at http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

Your return statement includes an object literal. So each time counter is invoked a new object is created in memory.

Answer 3

Basically what is happening here, is that when you call function counter() - new private counter - n is created and an object which contains two functions that can access that private variable, so it can not be disposed of until your returned object is not destroyed. Also everything that is within your function is not bound to anything, meaning if your object that you are returning would be defined somewhere else and you would only return it's reference - this function would create new counter n and your object would now refer to new counter n, but the old one would be disposed of.