accessing global property using "this" keyword inside a function

Question

I do know that in javascript, when you use "this" keyword inside a function, then "this" would refer to the 'owner' of that function according to Quirksmode website. Therefore when we have a function and we use "this" inside it, then "this" refers to the global (window) object.

I am a little confused on how "this" works, for example in the code below, "this" then should be able to resolve x since x is pretty much a property of global object (in this case window). But this.x in this case alerts "undefined" instead of the x value.

var x = "Global";

function foo(){
    alert(this.x);   //undefined     
};
foo();

I then tried some other things too:

function bar(){
    function foo(){
        alert(this); //[Object DOMWindow]
    };
    foo();
};

bar();

If my understanding is correct, then 'this' should refer to bar() in that second case since it is the owner of foo(), but why is that it instead still refers to the global object?

Can someone explain what is the correct theory regarding "this" keyword?

Answer 1

You've got the wrong end of the stick. The value of this depends on how the function is called, not how it is defined.

• If you call window.foo() then (inside foo) this will be window
• If you call bar.foo() then this will be bar (although you need to copy foo so it is a property of bar first)
• If you call baz.bar.foo() then this will be bar (you only ever get the parent object via this)
• If you call foo.call(bar) then this will also be bar as call lets you override this
• If you call new foo() then this will be the new object being created

The default object is window, so if you just call foo() then that is the same as window.foo().

It doesn't matter what scope the function is defined in.

Answer 2

Summarizing your question, you ask why in your first snippet, this.x is undefined:

var x = "Global";
function foo(){
    alert(this.x);   //undefined     
}
foo();

It doesn't make sense at all, the this value should refer to the global object -if your code were on strict mode, you would get a TypeError, since this by itself would be undefined-.

The only way I think where this.x could be undefined, is in the case that the variable declaration of x was made within a function.

Check the two following examples: 1 and 2, it's exactly the same code, the difference is that the second one, the code is wrapped in an onload event handler, so the x variable doesn't exist in the global scope (window.x is undefined)...

Answer 3

Yes, this is always the owner of the function being executed and the best answer about this subject is more than you ever wanted to know about this

var x = "Global";

function foo(){
    alert(this.x); // alerts "Global" for me    
};

As for the bar(), it is a standalone function and this will be bound to the "global" object as described in the answer linked above, which is your case is the DOMWindow

Answer 4

If you really wish to learn how this works, then read the ECMAscript 262 specs from the section 10.3 Execution Context and onwards.

Here is what it says in section 10.4.3:

10.4.3 Entering Function Code

The following steps are performed when control enters the execution context for function code contained in function object F, a caller provided thisArg, and a caller provided argumentsList:

1. If the function code is strict code, set the ThisBinding to thisArg.

2. Else if thisArg is null or undefined, set the ThisBinding to the global object.

3. Else if Type(thisArg) is not Object, set the ThisBinding to ToObject(thisArg) .

4. Else set the ThisBinding to thisArg.

5. Let localEnv be the result of calling NewDeclarativeEnvironment passing the value of the [[Scope]] internal property of F as the argument.

6. Set the LexicalEnvironment to localEnv.

7. Set the VariableEnvironment to localEnv.

8. Let code be the value of F‘s [[Code]] internal property.

9. Perform Declaration Binding Instantiation using the function code code and argumentsList as described in 10.5.