Referring to self after callback

Question

It seems that this references in javascript don't work after a callbackfunction. When running this code:

new Bla().start();

function Bla(){
    this.start = function(){
        alert("starting");
        x(this.done);
    }

    this.done = function(){
        alert("done");
        try{
            this.postDone();
        }
        catch(e){
            alert(e);
        }
    }

    this.postDone = function(){
        alert("postdone");
    }
}

function x(callback){
    alert("x");
    try{
        callback();
    }
    catch(e){
        alert(e);
    }
}

The alerts will be as follows:

Starting
x
done
TypeError: undefined is not a function

I'd like to know why this problem exists, and preferably a best-practise to solve this.

`this` refers to the context, you're calling `done` from a different context. Or should we rather talk about [lexical environment](http://es5.github.io/#x10.2)? — Teemu, Jan 03 '15 at 14:57

score 3 · Accepted Answer · answered Jan 03 '15 at 15:02

3

change the x function call like this,

this.start = function(){
    alert("starting");
    x(this.done.bind(this));
}

answered Jan 03 '15 at 15:02

Sampath Liyanage

4,776
2
28
40

That is exactly the kind of elegant solution I was looking for. Thank you – Daan Luttik Jan 03 '15 at 15:05
Cool solution, I didn't know a JavaScript function could be bound with a "this" object. +1 – bgoldst Jan 03 '15 at 15:13

score 0 · Answer 2 · answered Jan 03 '15 at 15:01

you need to save the reference to that context as context changes here , see here how this stored in ref and passed into arguments and then called using ...

    new Bla().start();

    function Bla(){
        this.start = function(){
            alert("starting");
            x(this.done ,this);
        }

        this.done = function(){
            alert("done");
            try{
                var st = arguments[0];
                console.log(st); 
                st.postDone();
            }
            catch(e){
                alert(e);
            }
        }

        this.postDone = function(){
            alert("postdone");
        }
    }

    function x(callback,ref){
        alert("x");
        try{
          callback(ref);
        }
        catch(e){
            alert(e);
        }
    }

hope that helps...

Thanks, although it is not the shortest or most elegant solution it works. — Daan Luttik, Jan 03 '15 at 15:06

score 0 · Answer 3 · answered Jan 03 '15 at 15:06

Functions don't intrinsically know about the "this" object. You only get a "this" object when a function is invoked through an object, e.g. obj.func(). Just calling func() will result in an undefined "this" object.

I can think of three possible solutions for your code:

Solution 1: Pass the "this" object with the callback, and invoke the callback on it with call() or apply()

...
function Bla(){
    this.start = function(){
        alert("starting");
        x(this.done,this);
}
...
function x(callback,object){
    alert("x");
    try{
        callback.apply(object);
    }
    catch(e){
        alert(e);
    }
}

http://jsfiddle.net/4gt2u0y9/

Solution 2: Pass the "this" object and the name of the function to call on it

...
function Bla(){
    this.start = function(){
        alert("starting");
        x(this,'funcName');
}
...
function x(object,funcName){
    alert("x");
    try{
        object[funcName]();
    }
    catch(e){
        alert(e);
    }
}

http://jsfiddle.net/4gt2u0y9/1/

Solution 3: Pass just the "this" object, and have the callback client assume the callback name

...
function Bla(){
    this.start = function(){
        alert("starting");
        x(this);
}
...
function x(callbackServer){
    alert("x");
    try{
        callbackServer.done();
    }
    catch(e){
        alert(e);
    }
}

http://jsfiddle.net/4gt2u0y9/2/

Referring to self after callback

3 Answers3