设置了JavaScript对象，但在访问时为null

Question

I have the following object that constructs a session variable:

var sessionObject = function (key) {
    this._key = key;
    this._content;
    this.set = function (v) {
        this.setLocal(v);
        $.post('/Program/SetVariable',
        { key: this._key, value: v }, function (data) {
        });
    };
    this.get = function (callback) {
        var setterCallback = this.setLocal;
        $.get('/Program/GetVariable',
        { key: this._key }, function (data) {
            setterCallback(data);
        }).done(function () {
            callback();
        });
    };
    this.setLocal = function (v) {
        this._content = v;
    };
    this.getLocal = function () {
        return this._content;
    };
}

And my C# in the controller is as follows:

public ActionResult SetVariable(string key, string value)
{
    Session[key] = value;
    return this.Json(new { success = true });
}

public ActionResult GetVariable(string key)
{
    return this.Json(Session[key], JsonRequestBehavior.AllowGet);
}

I create a new session object every time the page is loaded, which references items in the session located on the server. When the session is set with the set() function, _content is set correctly and is able to be accessed publicly through item.getLocal() (either in the browser console or in code).

When I revisit the page and the session object referring to said item is already created, when I run the item.get() function it accesses the session variable and sets it to the _content object, I know this because I can do a console.log(this._content) in the setLocal() function which shows that the variable has been set correctly. But when I wish to access the content of the session object via either this.getLocal() or item._content while through the browser console or other lines of the code I get undefined returned to me.

So to illuminate the process some more this is what I do on a reload where there is already data in the session:

var item = new sessionObject("item");
item.get(printData);

function printData() {
   $("printbox").append(item.getLocal());
}

This does not print anything.

Is there a reason I can not access this item's content unless it is specifically set by the item.set function?

Answer 1

Because you do this:

var setterCallback = this.setLocal;

and call it like so:

setterCallback(data);

You have lost the context of your sessionObject instance, so the this inside the setLocal function is no longer your object instance but the global window object.

You can do two things to correct this, save a reference to this instead of saving a reference to the function and call setLocal from that reference

var that = this;
/.../
that.setLocal(data);

or you can bind object instance when you save the setLocal reference

var setterCallack = this.setLocal.bind(this);