function LolClass(){

    this.init = function(){             
        button_a.bind("tap", function(){                
            this.refreshFields(); // doesn't work 
            //refreshFields(); // doesn't work either
        });     
    }

    this.refreshFields = function(){
        alert("LOL");
    }

    this.dummy = function(){
        this.refreshFields(); // W O R K S!
    }
}

When I tap the button_a, I get a reference error, as refreshFields method isn't "found".

Uncaught ReferenceError: refreshFields is not defined at file:///android_asset/www/src/pages/main.js:70

But if I call that method in other places than that tap listener, it works.

I'm totally certain that the this inside the tap listener function is referencing to button_a, the event target.

My question is: What is the best(oo) fix for that?

function LolClass(){

    this.init = function(){             
        button_a.bind("tap", function(){                
            this.refreshFields(); // doesn't work 
            //refreshFields(); // doesn't work either
        });     
    }

    this.refreshFields = function(){
        alert("LOL");
    }

    this.dummy = function(){
        this.refreshFields(); // W O R K S!
    }
}

When I tap the button_a, I get a reference error, as refreshFields method isn't "found".

Uncaught ReferenceError: refreshFields is not defined at file:///android_asset/www/src/pages/main.js:70

But if I call that method in other places than that tap listener, it works.

I'm totally certain that the this inside the tap listener function is referencing to button_a, the event target.

My question is: What is the best(oo) fix for that?

• javascript
• oop
• scope

• I think this is referring to button_a, so it's not in the right scope. I'm not entirely sure but you might have to pass the parent object into the function to reference it inside. – sachleen Commented Jun 12, 2012 at 17:55
• What is .bind()? Is it part of some library? If so, does that .bind() method accept a context argument? – user1106925 Commented Jun 12, 2012 at 18:04
• 1 Note that this pattern in javascript is deprecated. If you forget the new operator, very bad things can happen. you should use closure. – gdoron Commented Jun 12, 2012 at 18:05
• @gdoron, can you provide me links related to that deprecation? – Marcelo Assis Commented Jun 12, 2012 at 18:20
• 1 @MarceloAssis. A book - JavaScript: The Good Parts – gdoron Commented Jun 12, 2012 at 18:23

3 Answers 3

Try this

function LolClass(){

    var someVar = 0; 
    var self = this;

    this.init = function(){             
        button_a.bind("tap", function(){                
            self.refreshFields(); // now works!
            //refreshFields(); // doesn't work
        });     
    }

    this.refreshFields = function(){
        alert("LOL");
    }

    this.dummy = function(){
        this.refreshFields(); // W O R K S!
    }
}

You should cache this:

var that = this; // "that" is a convention name for "this"
this.init = function(){             
        button_a.bind("tap", function(){                
            that.refreshFields(); 
        });     
    }

You need to modify your code:

function LolClass(){

    var someVar = 0; 
    var $this = this;

    this.init = function(){             
        button_a.bind("tap", function(){                
            $this.refreshFields();
        });     
    }

    this.refreshFields = function(){
        alert("LOL");
    }

    this.dummy = function(){
        this.refreshFields(); // W O R K S!
    }
}

"this" inside callback refers to different object. I added var $this = this; and used $this inside callback.