what does 'this' refer to in Javascript functions

Question

I understand the general idea behind the this keyword but I'm having trouble figuring out what it actually refers to in practice. For example, in both these example exercises, I guessed the wrong number.

for question1, I said that the alert would be '5', because it is referring to the this.x outside the anonymous function in the function.

In question2, I thought the alert would be 5 because this line

var alertX = o.alertX;

would bind the value 5 for property x inside the variable o to the new variable 'alertX' which becomes the function call in the next line: alertX();

Can you explain why I'm wrong?

var question1 = function() {
    this.x = 5;
     (function() {
        var x = 3;
        this.x = x;
    })();
    alert(this.x);
};
var answer1 = 3; 


var question2 = function() {
    this.x = 9;
    var o = {
        'x':5,
        'alertX':function() { alert(this.x); }
    };
    var alertX = o.alertX;
    alertX();
}
var answer2 = 9; 

Answer 1

In the first case, when you invoke a method with no explicit receiver this is the Global object (the window in a web browser).

Similarly in the second case: even though the function is defined on the object, and you are inside another, by invoking the function with alertx() the this is set to the Global/window.

In short:

• For foo.bar(), the this inside of bar will be foo.
• For bar(), the this will be the Global object.
  • This includes so-called "self-invoking lambdas", i.e. (function(){ ... })().
• For bar.call(whee) and bar.apply(whee), the this will be whee (because that's what these methods do).

Another example:

var o1 = { name:"o1", f:function(){ console.log(this.name) } };
var o2 = { name:"o2" };
o2.gogogo = o1.f;
o2.gogogo(); // Will output "o2"