在JavaScript类中调用父方法

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!

Answer 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
        );
    }
}

Answer 2

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

Answer 3

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.