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

These are good examples of how interesting this becomes in Javascript. this always refers to the context in which it was invoked / called, not simply where it is at that moment! question2 is a perfect example of it.

I’m assuming you are invoking these globally like so:

question1();
question2();

In question1:

You have an anonymous function that is ran after you first set x to 5. This anonymous function if not set to a variable, inside a function etc, would have this set to the global variable of window. But you have it within a function & set to variable question1. So when it runs itself, it sets this‘s (which is question1 function) x variable to 3.

In question2:

X is originally set to 9, this being question2 in this instance. Now the part that is throwing you off is that, even though within the o {} object you set x : 5. And your alertX function is calling this.x. All of this would lead you to think it will alert 5! But you are invoking your alert function outside of the o {} object, hence the this refers to question2 function again!