Invoke a javascript object method from within a callback [duplicate]

Question

I define the following MyClass and its methods in a user script:

function MyClass() {
    this.myCallback = function() {
        alert("MyClass.myCallback()");
    };

    this.startRequest = function() {
        GM_xmlhttpRequest({
            'method': 'GET',
            'url': "http://www.google.com/",
            'onload': function (xhr) {
                myClassInstance.myCallback();
            }
        });
    };
}

var myClassInstance = new MyClass();
myClassInstance.startRequest();

This script works and the myCallback() method gets called once the GM_xmlhttpRequest completes.

However, it only works because the onload callback is referring to the global variable myClassInstance. If I update the onload callback to:

'onload': function (xhr) {
    this.myCallback();
}

Then I get the (Chrome) error:

Uncaught TypeError: Object [object DOMWindow] has no method 'myCallback'.

It seems this is being evaluated in the wrong context.

Is there a way to invoke the myCallback() method of myClassInstance without having to resort to using a global variable?

Jeremy · Accepted Answer · 2011-08-08 16:32:58Z

40

Save the correct this, when it is in scope, into a variable. Then you can reference it later:

 this.startRequest = function() {
     var myself = this;
     GM_xmlhttpRequest({
         'method': 'GET',
         'url': "http://www.google.com/",
         'onload': function (xhr) {
             myself.myCallback();
         }
     });
 };

answered Aug 8, 2011 at 16:32

Jeremy

22.5k4 gold badges71 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anthony Over a year ago

+1 You just ended my hour long head slamming session. Thank you. :)

hugomg · Accepted Answer · 2011-08-08 17:22:22Z

8

The simplest solution, as already was pointed out, is creating an alias for the this that stays in scope. The most popular variable names for the alias are things like self or that, but anything works, really.

The other alternative (that might or might not be better, depending on the use case) is binding the method into a "plain" function and using that instead:

var f = this.callback.bind(this);

...
'onload': function(){
    f();
}

bind is not supported on old browsers, but you can find alternatives in many JS frameworks. The example I gave doesn't look that good, but it can be very convenient when you want to pass your method directly as a callback function (you might also get partial function application as well and that is very neat)

answered Aug 8, 2011 at 17:22

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

1 Comment

Jeremy Over a year ago

Be careful with self because of window.self.

JAAulde · Accepted Answer · 2011-08-08 16:34:17Z

3

Store a reference to the instance and use it:

function MyClass() {
    this.myCallback = function() {
        alert("MyClass.myCallback()");
    };

    var instance = this;

    instance.startRequest = function() {
        GM_xmlhttpRequest({
            'method': 'GET',
            'url': "http://www.google.com/",
            'onload': function (xhr) {
                instance.myCallback();
            }
        });
    };
}

answered Aug 8, 2011 at 16:34

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

Comments

Jason · Accepted Answer · 2024-06-08 01:30:20Z

0

With modern javascript, this is more elegantly solved with arrow functions which preserve the scope of this

function MyClass() {
    this.myCallback = function() {
        alert("MyClass.myCallback()");
    };

    this.startRequest = function() {
        GM_xmlhttpRequest({
            'method': 'GET',
            'url': "http://www.google.com/",
            'onload': (xhr) => {
                this();
            }
        });
    };
}

var myClassInstance = new MyClass();
myClassInstance.startRequest();

answered Jun 8, 2024 at 1:30

Jason

11.2k7 gold badges40 silver badges38 bronze badges

Collectives™ on Stack Overflow

Invoke a javascript object method from within a callback [duplicate]

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Related