Call parent method in a JavaScript Class

Question

before nothing I'm new and I'm glad to join to this great community. The thing is, I have a JavaScript class called Character like this:

var Character = function()

{

    // ..Some previous Properties / Methods (included one called "StareDown()")..

    // And this method:

    this.GrabDown = function()

    {
        Context.clearRect(0, 0, CanvasWidth, CanvasHeight);
        //Context.fillRect(0, 0, CanvasWidth, CanvasHeight);
        Context.drawImage(this.GrabbingDown, CharacterX, CharacterY, SpriteWidth, SpriteHeight);

        window.setTimeout
        (
            function()

            {
                // Here is where I want to call the parent class method "StareDown()", but I don't know how.                
            },
            250
        );
    }
}

So this is my big question, How can I access a parent method through that sub anonymous function? I've been trying to figure it out the whole night but I couldn't find some helpful information, Thank's!

Sidharth Mudgal · Accepted Answer · 2012-10-04 14:44:18Z

1

You need to store your this object of the parent in a variable (assuming you have defined the function as this.StareDown = function () {...}

var Character = function()

{

    // ..Some previous Properties / Methods (included one called "StareDown()")..
    this.StareDown = function() {...}

    var curCharacter = this;

    this.GrabDown = function()

    {
        Context.clearRect(0, 0, CanvasWidth, CanvasHeight);
        //Context.fillRect(0, 0, CanvasWidth, CanvasHeight);
        Context.drawImage(this.GrabbingDown, CharacterX, CharacterY, SpriteWidth, SpriteHeight);

        window.setTimeout
        (
            function()

            {
                // Here is where I want to call the parent class method "StareDown()", but I don't know how.       
                curCharacter.StareDown(...);         
            },
            250
        );
    }
}

answered Oct 4, 2012 at 14:44

Sidharth Mudgal

4,26422 silver badges25 bronze badges

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

1 Comment

Neo Over a year ago

Brilliant, it was the simplest way, just assigned my this to a var called Parent and then called the method through it as you showed me, Thank you so much.

Elias Van Ootegem · Accepted Answer · 2012-10-04 14:48:59Z

0

You could just use window.setTimeout(this.StareDown,250); but bare in mind that the method will be called in the global context (ie this will point to window, rather than the Character instance that invoked the GrabDown method.

To use the function as an object method:

window.setTimeout((function(that)
{
    return function()
    {
        return that.StareDown();
    }
})(this),250);

Should work. This being rather verbose, perhaps looking at the MDN docs for call, apply and especially bind might prove useful

answered Oct 4, 2012 at 14:48

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

Comments

Aadit M Shah · Accepted Answer · 2012-10-04 15:11:19Z

0

This is what I would have done:

var Character = function () {
    this.GrabDown = function () {
        setTimeout(function () {
            // call this.StareDown in here
        }.bind(this), 250);
    };
};

This works because we're binding the the this pointer to the anonymous FunctionExpression passed to setTimeout. Thus it may be used like a normal method of the class.

answered Oct 4, 2012 at 15:11

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

Collectives™ on Stack Overflow

Call parent method in a JavaScript Class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related