CODEWITHSUNDEEP
javascript
user656925
user656925

Reputation:

What does 'this' refer to in call back function inside the module pattern

In Ajax.use, inside the callback function this refers to the callback function.

However outside of a callback definition this would refer to a particular instance of Ajax.

That is how I use this in Ajax.invoke -> this.use() to call a member method from another member method.

I need to call a member method inside of the callback function as well.

I guessed and put in 

this.invoke()

but I dont' think this is referring to the correct object as it is in the callback function. I think it refers to the callback function object.

/**
 *    Ajax
 */

var Ajax = ( function () 
{
    var Ajax = function (element) 
    {
        this.object = this.create();
    };
    Ajax.prototype.create = function() 
    {
        var request;
        try
        {
            request = new window.XMLHttpRequest();
        }
        catch( error )
        {
            try 
            {
                request = new window.ActiveXObject( "Msxml2.XMLHTTP" );
            }
            catch( error )
            {
                try
                {
                    request = new window.ActiveXObject( "Microsoft.XMLHTTP" );
                }
                catch( error )
                {
                    request = false;
                }
            }
        }
        // alert("Object Created Successfully");
        return request;
    };

    Ajax.prototype.use = function( param, ajax_func )
    {
        alert("Ajax.prototype.use Called");
        this.object.open( "POST", Global.GATEWAY, true );
        this.object.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
        this.object.setRequestHeader( "Content-length", param.length );
        this.object.setRequestHeader( "Connection", "close" );
        this.object.onreadystatechange = function()
        {
            if( this.readyState === 4 )
            {
                if( this.status === 200 )
                {
                    ajax_func( this.responseText );
                    return true;
                }
                else
                {
                    this.invoke( param, ajax_func );
                    return false;
                }
            }
        };
        this.object.send( param );
        return true;
    };

    Ajax.prototype.invoke = function( param, ajax_func )
    {
        var state = false,
            count = 1;
        while( state === false && count <= 5 )
        {
            if( count !== 1 )
            {
                alert( 'Ajax Object Use Failed | Try Again ');
            }
            state = this.use( param, ajax_func );
            count++;
        }
        return state;
    };

    return Ajax;

} () );

Upvotes: 2

Views: 121

Answers (1)

Prestaul
Prestaul

Reputation: 85184

You are exactly right that inside your callback this is no longer a reference to your Ajax object. You need to create a reference to it that you can use inside the callback:

Ajax.prototype.use = function( param, ajax_func )
{
    alert("Ajax.prototype.use Called");
    var self = this;
    this.object.open( "POST", Global.GATEWAY, true );
    this.object.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
    this.object.setRequestHeader( "Content-length", param.length );
    this.object.setRequestHeader( "Connection", "close" );
    this.object.onreadystatechange = function()
    {
        if( this.readyState === 4 )
        {
            if( this.status === 200 )
            {
                ajax_func( this.responseText );
                return true;
            }
            else
            {
                self.invoke( param, ajax_func );
                return false;
            }
        }
    };
    this.object.send( param );
    return true;
};

Notice that I am defining var self = this; and using self rather than this inside of the callback.

Upvotes: 2

Related Questions