Question

I am trying to understand why an inner function can access a public property of an outer function when the outer function is called directly, but not when it is assigned to a variable?

Example:

function outer(x,y){

    this.x = x;
    this.y = y;

    function inner(){
        alert(this.x);       
    }

    inner();
}

outer(1,2); //As expected, alerts 1
var func = outer(1,2) //Also alert 1
var func2 = new outer(1,2); //Alerts undefined

One thing I tried was to remove the this keyword from alert(this.x); and it did work for all three cases. However, if I do remove the this keyword, I’d be accessing the passed in param, not the public variable, which is definitely not the desired action. Can someone explain this behavior?

Answer 1

When you call outer(1, 2) like that, this is a reference to window, so “x” and “y” are effectively global variables. That’s why inner() can access “x”.

When you call new outer(1, 2) you have caused this (in “outer”) to be a reference to a new object. When “inner” is called inside “outer”, this will still reference window, so there’s no “x”.

The value of this is determined for every function call, and the value depends only on the particulars of that call. Thus the fact that you call “outer” via new has no effect on the interior call to “inner” — because you simply call the function as inner();, the value of this inside that function will be a reference to window (well, the global context, whatever that is).

Here are the ways this can be set upon a call to a function:

1. If the function is called via the new operator, then this will refer to a newly-created object.
2. If the reference to the function is obtained via a property lookup on an object (foo.someFunction()), then this will be a reference to that object.
3. If the function is called via .call() or .apply() from the Function prototype, then this will refer to the first argument to whichever of those functions was used, coerced to an object value if necessary.
4. If the function is called via a simple “naked” reference, then this will refer to the global context (window in a browser). edit — Šime Vidas points out in a comment above that in strict mode, this case results in this being null (which really makes a little more sense, and would avoid the weirdness observed in the OP).