Question

I wrote my first Javascript with OOP. And I am trying to call its instance method from another method within same object.

When I call begin() method like below which is fired after closing the dialog, I get "this.after() is not a function".

If other language like Java, it should just process without any problem.
Is there anything I’m missing?

I am using jQuery bind() for dialog close event so “this” must be pointing to not class itself.

function MyHandler() {

    this.begin = function() {
            $("#hiddenIframe").dialog({
                autoOpen: true,
                height: 300,
                width: 300
            });


            $("#hiddenIframe").bind("dialogclose", function() {
                this.after();
            });
    }

    this.after = function() {
        //do something here
    }
}

var myInstance = new MyHandler();
myInstance.begin(); //error: this.after() is not function ???

Answer 1

Try this:

function MyHandler() {

    var thisInstance = this;

    this.begin = function() {
        $("#hiddenIframe").bind("dialogclose", function() {
             thisInstance.after();
        });
    }

    this.after = function() {
        //do something here
    }
}

Thank you, Juicy Scripter. I don’t know how jquery dialog calls dialogclose event handlers, but the described error indicates that context of the call of anonymous function with this.after(); inside it is not MyHandler, and this means something else there. To be explicit about whose method after is, define local variable in MyHandler constructor and use this variable when you need to call MyHandler instance methods inside functions that will be called in unknown context.