suppose I have a function:

function test(){}

test.prototype.method01=function(){
    //do something
}

test.prototype.method02=function(){
    //how can I call the method01?
    //this.method01()...?
    //but the chrome through an error:
    //Uncaught TypeError: Object #<HTMLImageElement> has no method 'method01'
}

Edited: in fact the method01 like this:

test.prototype.method02=function(){
    $('.cpy').resizable({

    }).draggable({
        start:function(e,ui){
            this.method01();
        }
    });
}

suppose I have a function:

function test(){}

test.prototype.method01=function(){
    //do something
}

test.prototype.method02=function(){
    //how can I call the method01?
    //this.method01()...?
    //but the chrome through an error:
    //Uncaught TypeError: Object #<HTMLImageElement> has no method 'method01'
}

Edited: in fact the method01 like this:

test.prototype.method02=function(){
    $('.cpy').resizable({

    }).draggable({
        start:function(e,ui){
            this.method01();
        }
    });
}

• javascript
• call
• prototype

• 2 Are you assigning method02 to an event of an image by any chance? – pimvdb Commented Mar 17, 2012 at 12:27
• It depends on how you call method02. You should read the MDN article about this. – Felix Kling Commented Mar 17, 2012 at 12:29
• @pimvdb:I have improve my question,show how I call it – hh54188 Commented Mar 17, 2012 at 12:33
• As so often in jQuery, inside the start callback, this refers to the element you call draggable on, in this case .cpy. You have to keep a reference to the this of method02. – Felix Kling Commented Mar 17, 2012 at 12:34
• Related: stackoverflow.com/questions/8778874/… – user11153 Commented Jan 24, 2014 at 10:00

3 Answers 3

test.prototype.method02=function(){
    var testThing = this;
    $('.cpy').resizable({

    }).draggable({
        start:function(e,ui){
            testThing.method01();
        }
    });
}

You have to preserve the this reference in another local variable so that the callback function can use it when calling the other method. The this reference is bound upon each and every function call, including calls to callback functions like the one you're using in the ".draggable()" setup. When that's called this will be set to something different from the this in your "method02" function.

Yea, you could manually cache this in the lexical scope like other answers in this question suggest. However, the alternative that i would suggest is to create a bound method using $.proxy or function.bind as your call back.

Bound methods are always called with a stable this. I find them to be much more readable, than bizarrely named references to this in higher scopes

whats about

test.prototype.method02=function(){
     this.method01.apply(this);
     // do some other stuff
}