scope - Confusion with "this" object in JavaScript anonymous functions

Question

Hi I have following JavaScript code that I am trying to run. My aim is to grasp the meaning of this in different scopes and different types of invocations in JavaScript.

If you look in code below: I have a inner anonymous function, which is getting assigned to innerStuff variable. In that anonymous function as such this points to window object and not the outer function object or anything else. Event though it still has access to out function's variables.

Anyway, I am not sure, why that would be; but if you look at code below, I pass this in form of that to innerStuff later and it works just fine and prints object with doofus attribute in console.

    var someStuff = {
        doofus:"whatever",
        newF: function()
        {
            var that = this;
            console.log(that);
            var innerStuff = function(topThis){
                console.log(topThis);
            };

            return innerStuff(that);
        }
    }

    someStuff.newF();

Now I am changing a code only little bit. And instead of assigning it to innerStuff, I'll just directly return the function by invoking it as shown below:

    var someStuff = {
        doofus:"whatever",
        newF: function()
        {
            var that = this;
            console.log(that);
            return function(that){
                console.log(that);
            }();
        }
    }

    someStuff.newF();

This prints undefined for the inner anonymous function. Is it because there is a clash between a that that is being passed as parameter and a that defined in outside function? I thought the parameter would have overriden the visibility. Why would the value be not retained?

This is utterly confusing.

On the other hand if I don't pass that, but instead just use it, because visibility is there, the outcome is proper and as expected.

What is it that I am missing? Is it the clash between the variables, present in same scope? Is there a good reason, that inner functions have this bound to window object?

Answer 1

this in JavaScript refers to the object that you called a method on. If you invoke a function as someObject.functionName(args), then this will be bound to that object. If you simply invoke a bare function, as in functionName(args), then this will be bound to the window object.

Inside of newF in the second example, you are shadowing the that variable in your inner function, but not passing anything into it, so it is undefined.

        var that = this;
        console.log(that);
        return function(that){
            console.log(that);
        }();

You probably want the following instead, if you want something that is equivalent to your first example (passing that in to the inner function):

        var that = this;
        console.log(that);
        return function(that){
            console.log(that);
        }(that);

Or the following, if you don't want to shadow it and just use the outer function's binding:

        var that = this;
        console.log(that);
        return function(){
            console.log(that);
        }();