Question

I’m attempting to make a class in javascript. I create it with the JSON type object thing.

Doing this:

Foo = {
   PubId: '',

   Init:function( oCallback )
   {
         this.sendCommand( 'INIT', {}, oCallback );
   },

    sendCommand : function( sCommand, aParams, oCallback )
    {

        setTimeout( oCallback, 1000, '{"response":"INIT","time":1287982024,"pubid":"4cc50bc47c7b3"}' );

        return true;
    },
    onData : function( sData )
    {
        var aRes = JSON.parse( sData );

        this.PubId = aRes.pubid;
        alert( this.PubId );
        return this.PubId;
    },
    umtest:function(){ alert( this.PubId ); }
}

I then also do this after including the script:

Foo.Init( Foo.onData ); 

The problem is that the this.PubId is updated inside the onData method, but outside of it, the pubid is empty.

I am pretty new at javascript classes, so I’m not sure what needs to be done so I was hoping someone could help meh out. 🙂

Thanks for your time!

Answer 1

Well you’ve got two problems here. The first problem is not understanding how this works in Javascript. When Foo.onData is called via setTimeout( oCallback, ...) the this will reference to the global object not Foo.

In order to call it with Foo as this you should change your code:

sendCommand: function (sCommand, aParams, oCallback) {
    var that = this;           // save this reference
    setTimeout(function () {
        oCallback.call( that,  // call the function with it
               '{"response":"INIT","time":1287982024,"pubid":"4cc50bc47c7b3"}' );
    }, 1000);
    return true;
},

In order to test what’s changed place this code to onData:

// is `this` really Foo or the global object?
alert(this === Foo);    // should be true
alert(this === window); // should be false

In the updated version this will correctly reference Foo as it’s object of invocation.

The second problem you might be facing with is that your function called with setTimeout will only be executed after 1000 ms = 1s, so if you’re simply checking alert(Foo.PubId) outside of Foo you will get an empty string (because the callback hasn’t been called yet).

In order to test if Foo.PubId is indeed changed:

// execute the check after 2s so as to
// make sure the callback has been called
setTimeout( function () {
  alert(Foo.PubId);
}, 2000);

You can check the full test case here.