Why does `this` create a global variable instead of using the variable from the call site?

Question

I'm reading the You Don't Know JS books and am on this and Object Prototypes.

I get that to know what this refers to I need to look at the call-site. And the call site is what this will refer to. What I don't get is why this code isn't working as I think it should (I only wrote it to understand this, not for any working problem or anything).

function foo() {
  console.log(foo.hasOwnProperty('a')); // 1
  console.log(window.hasOwnProperty('a')); // 2
  console.log(this.a); // 3
  this.a++;
  console.log(window.hasOwnProperty('a')); // 4

}
function bar(){
  foo.a = 42;
  foo();
}
bar();

1. If you look at the first line in bar which creates an a property for foo and assigns it the value 42. If I comment this line out, then running console.log(foo.hasOwnProperty('a')); gives me false. And if I have it run, then it returns true. But if this is the case, then calling bar is indeed creating an a property for foo, right? This leads to question 3.

2. I get that at this point window.a does not exist.

3. Why does this return undefined? this should resolve to foo.a, right? Because the context of this would be in bar, correct? Bar is the call-site. However, this remains undefined regardless of whether foo.a = 42 is commented out or not.

4. Why does this return true now, after running this.a++? How and why is a global variable being created?

Answer 1

Note: this is just an easy way of thinking about this. In complicated cases (such as when using .bind() or OOP), the following might not be accurate.

this, by default sorta refers to the object that contains the function being called. For example, if I did

var obj = {
    fxn: function() {
        console.log(this.bar);
    },
    bar: 3
}
obj.fxn(); // (1)
var fxn = obj.fxn();
fxn(); // (2)

(1) Will print "3" to the console; Because you are, in a way, calling fxn "through" obj, this will point to obj. In other words, because you are calling the copy of fxn that is stored inside of obj, this will point to obj.

(2) Will (assuming bar has not been defined elsewhere) print undefined. That is because fxn isn't being called "through" anything. As a result, it pretends that fxn is being called through window.

Although in your example, foo is being called in bar, bar does not call a version of foo being... well, stored inside itself. bar does not call foo... "through" foo.

Admittedly, that's pretty confusing. Maybe this will clear up some confusion: If you change bar to this:

function bar(){
    foo.a = 42;
    foo.foo = foo;
    foo.foo();
}

it will print 42 instead of undefined. The important part is that the object that foo is being called through will be this. For instance,

function bar(){
    var baz = {};
    baz.a = 42;
    baz.foo = foo;
    baz.foo();
}

Will also print 42.

Answer 2

In foo this refers to the parent object - i.e. window.

so this.a and window.a are referring to the same thing.

Because the context of this would be in bar, correct?

Incorrect. For bar to be "this" in foo you would need to apply or call or bind foo passing your desired "this" as context. i.e.

foo.call({});

or 

foo.bind({});

Would make "this" and empty object within foo.

Why does this return true now, after running this.a++? How and why is a global variable being created?

For the same reason - when you do this.a++ you are creating and incrementing a global variable a by one.