"this" keyword inside closure

Question

I've seen a bunch of examples but can't seem to get some sample code to work.

Take the following code:

var test = (function(){
    var t = "test";
    return {
        alertT: function(){ 
            alert(t);
        }
    }
}());

and I have a function on window.load like:

test.alertT();

That all works fine. However, when I try to explicitly set the context of t inside the alert() in alertT, I just get undefined.

I've tried:

var that = this;
alert(that.t); //undefined

I've tried:

        return {
            that: this,
            alertT: function(){ 
                alert(that.t); // undefined!
            }
        }

and I've tried:

var test = (function(){
    var t = "test";
    var myObj = this;
    return {
        alertT: function(){ 
            alert(myObj.t); // undefined!
        }
    }
}());

what am I missing? I need to be able to set the context explicitly for things like callbacks etc. I've seen examples too (http://stackoverflow.com/questions/346015/javascript-closures-and-this-context) that seem like what I'm doing, so why does this not work?

Answer 1

t is not on the scope of 'this'. t is a variable local to the method. So somewhere you need to do

this.t = whatever

...

here is a real life example from an app I am writing

var scope = this;

cells.forEach(function(cell, index) {
            var given = cell.get('given');

            var value = cell.get('value'),
                            valueAsString = '%@'.fmt(value);


             var rowValues = scope.getRowForIndex(index);
            ...
}

the scope inside the forEach function is the scope of the array 'cells' over which I am iterating. Since I want to do things on the calling scope, I use a closure...

Answer 2

t is just a normal variable in the scope of the outside anonymous function (and thus also the inner anonymous function). It isn't a property on an object, so you simply set it without reference to this, that, or the_other.

var test = (function(){
    var t = "test";
    return {
        alertT: function(){ 
            alert(t);
        },
        setT: function (new_value) {
            t = new_value;
        }
    }
}());
test.alertT();
test.setT('hello, world');
test.alertT();

The syntax you are using is the usual pattern for creating something that acts like a private variable in JS.

Answer 3

In C# and Java, one can do something like this:

public class MyClass {
    private int x;

    public void DoSomething(int x) {
        int a = this.x;
        int b = x;
    }
}

The variables a and b will have values from different x's, since one is the class's x an one is the methods x.

Now, imagine if you could not use this to explicitly refer to the the class's x. Then you'd have to do the following:

public class MyClass {
    private int classX;

    public void DoSomething(int x) {
        int a = classX;
        int b = x;
    }
}

That i the situation you have in JavaScript, pretty much. At least in the situation you're describing. By using the methods apply and call you can change the context that a function is executed in, but you can never distinguish variables with the sames names but different scopes. You'll simply have to use different names for that.