Scope clarification in javascript

Question

Simple question. Why do we have set that = this? If we dont, we are in the global scope...but why?

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            // this now refers to global scope....why?
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

Answer 1

Writing that = this doesn't change the scope. The way the anonymous function is called will always end up with this being global object,* because that's exactly what the spec says should happen. Using that = this is just a workaround.

You could make this always point to myObj by using Function.call:

var myObj = {

    specialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb.apply(this);
    },

    render: function () {
        this.getAsyncData(function () {
            this.specialFunction();
        });
    }
};

and/or using Function.bind:

var myObj = {

    specialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        function callback() {
            this.specialFunction();
        }

        this.getAsyncData(callback.bind(this));
    }
};

---

^{* Unless you're in strict mode, in which case this is undefined.}

Answer 2

EDIT: in JavaScript the "this" context depends on how your function is called, example:

 function helloWorld()
 {
    console.log(this);
 }

And here two ways to call this function:

new helloWorld(); note that if you call your function in this way, the context of this will be the context of the function + prototype, so your console will show this: helloWorld {}

helloWorld(); if you call your function without of the "new", the context of "this" will be global(Window), so your console will show this: Window about:home

Ok, with this little explanation i will try to explain now why you have sometimes to use self/that...

Imagine that you want to use this.name inside this.hello function. Like I said before, the context of "this" depends on how your function is called, so if you want to ensure that this.name inside of this.hello function refer to this.name outside is recommended that you use self/that to avoid what happens bellow

function helloWorld(){
             var self = this;//or that = this
             this.name = "YourName" 
             this.hello = function(){
                 console.log(this); //the context of "this" here will be: "hello {}" 
                 return this.name; //undefined, because you don't have name attribute inside hello function
             }
             new this.hello(); //note how hello is called here... 

}

var test = new helloWorld(); 

And here a good explanation about context x scope: http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Answer 3

take a look at the this keyword in JavaScript and how it works. I’m sure we’ve all come across this issue:

 $("myLink").on("click", function() {
    console.log(this); //points to myLink (as expected)
    $.ajax({
        //ajax set up
        success: function() {
            console.log(this); //points to the global object. Huh?
        }
    });
});

this is a variable that is automatically set for you when a function is invoked. The value it’s given depends on how a function is invoked. In JavaScript we have a few main ways of invoking functions. I wont talk about them all today, but just the three ways most people use them; either when a function is called as a method, or on it’s own, or as an event handler. Depending on how a function is invoked, this is set differently:

function foo() {
    console.log(this); //global object
};

myapp = {};
myapp.foo = function() {
    console.log(this); //points to myapp object
}

var link = document.getElementById("myId");
link.addEventListener("click", function() {
    console.log(this); //points to link
}, false);

Doing $("myLink").on("click", function() {}) means that when the element is clicked, the function is fired. But this function is bound as an event handler, so this is set to the reference to the DOM element myLink. The success method you define within the Ajax request is just a regular function, and as such when it’s invoked, this is set to the global object, as it is when any function that’s not an event handler or an object method is.

$("myLink").on("click", function() {
    console.log(this); //points to myLink (as expected)
    var _this = this;  //store reference
    $.ajax({
        //ajax set up
        success: function() {
            console.log(this); //points to the global object. Huh?
            console.log(_this); //better!
        }
    });
});

Source: http://tinyurl.com/melbl92