why can't I access this.property in my object literal?

Question

I've just been restructuring my code into objects and using the this keyword, I've got this problem whereby, setting the prop works, but then when the second method fires, myProp is undefined. I've noticed if I use myObj to set and get rather than this it works fine. What's the difference here? What am I doing wrong? I though this was referring to the instance of which there is only one which was automatically instantiated by the object literal.

var myObj = {
    SetProp: function (id) {
        this.myProp = "abc";
        Ajax.GetJSONAfterStandardLogic(Utility.PrefixURL("/ajax/mymethod"), this.SetPropSuccess);
    },
    SetPropSuccess: function (response) {
        console.log("test " + this.myProp);
    }
}

Answer 1

Likely because when you call those functions, this is not the object. this is the binding with which the function was called.

A bit more code to demonstrate how you're calling the function would be useful, but you can make it work by using:

myObj.SetProp.call(myObj, id)

This binds myObj as this , for the SetProp function call.

If you put console.log(this) in either of those functions, you'll probably find that this is not what you're expecting.

Answer 2

When your callback function is executed, it's in a different scope. As such "this" references that scope and your "myProp" is not defined. That's why using myObj.myProp works - the scope remains valid.

Cheers

Answer 3

The this variable is set according to how a function is called. When you use objectReference.method() "dot" syntax this will automatically be set to the object. You can also call a function and explicitly set this to some other object by using .call() or .apply() .

In your case, when you pass this.SetPropSuccess as a callback function you are passing a reference to the function and when it is then called by GetJSONAfterStandardLogic() it is not called in a way that sets this to your object (most likely it will be equal to window ). You can work around the problem by saving a reference to the object in a local variable of SetProp() :

var myObj = {
    SetProp: function (id) {
        var self = this;
        this.myProp = "abc";
        Ajax.GetJSONAfterStandardLogic(Utility.PrefixURL("/ajax/mymethod"),
                                       function() { self.SetPropSuccess(); });
    },
    SetPropSuccess: function (response) {
        console.log("test " + this.myProp);
    }
}

Through the magic of closures, the anonymous function that I've added as a callback to pass to GetJSONAfterStandardLogic() has access to the variables in its containing scope SetProp() even after SetProp() has finished executing .

Bottom line is that you have to get used to this in JavaScript working very differently to the way it works in class-based OO languages like Java and C#. JavaScript is still OO, but these differences usually trip up people coming to the language from Java or C#.

Further reading: https://developer.mozilla.org/en/JavaScript/Reference/Operators/this