Why does the value of "this" changes.?

Question

I am learning javascript and i came across a doubt. Why is the value of "this" undefined in the first example , but prints out correctly in the second.

example 1:

var myNamespace = {
    myObject: {
        sayHello: function() {
            console.log( "name is " + this.myName );
        },
        myName: "john"
    }
};

var hello = myNamespace.myObject.sayHello;

hello(); // "name is undefined"

example 2:

var myNamespace = {
    myObject: {
        sayHello: function() {
            console.log( "Hi! My name is " + this.myName );
        },
        myName: "Rebecca"
    }
};

var obj = myNamespace.myObject;

obj.sayHello();//"Hi! My name is Rebecca"

Why does the value of "this" changes within the function. What concept am i missing?

Answer 1

First case you are just getting the reference of the function to the vairable hello, and invoking it from global context (window in browsers, global in node), So this becomes what invoked the function except for (bound functions). You can always set the context explicitly using function.call or set the context explicitly to the function using Ecma5 function.bind

hello.call(myNamespace.myObject); //now you are setting the context explicitly during the function call.

or just bind it while getting the function reference.

var hello = myNamespace.myObject.sayHello.bind(myNamespace.myObject); //Now no matter where you call it from `this` will point to the context of myObject

Second case you are invoking it from the object itself so this points to the object.

Answer 2

In the first case, the implicit this object is the global scope. Because there is no myName in the global scope, you get undefined.

If you want a free function with the proper this, use bind:

var hello = myNamespace.myObject.sayHello.bind(myNamespace.myObject);