Instance method not a 'FUNCTION'

Question

I can't seem to figure out what's wrong. I tried declaring update before setup and I still having problem calling an instance method on another instance method.

I believe this should work. But I could be wrong. Now I know that 'this' could change when the scope changes, I don't have anyway to refer to the instance to call my method!

How could I get around this?

function MainGameScene(renderer , screenSize)
{
    PIXI.loader
        .add("_assets/textures/sprites.json")
        .load(this.setup);  
}

MainGameScene.prototype.update = function()
{       
    var now = Date.now();

    var delta = (now - this.mLastCalledTime);
    this.mLastCalledTime = now;
    this.mElapsed += (delta / 1000);

    this.mSpaceShip.getSprite().x += this.mSpaceShip.getVelocity().x;
    this.mSpaceShip.getSprite().y += this.mSpaceShip.getVelocity().y;

    if(this.mCurrentScore != this.mSpaceShip.getHits())
    {
        this.mCurrentScore = this.mSpaceShip.getHits();
        scoreText.setText(this.mCurrentScore);
    }

    if(this.mElapsed >= MAX_SPAWN_RATE)
    {
        this.generateEnemy();
        this.mElapsed = 0.0;
    }

    for(var e in this.mEnemyShipsArray)
    {
        var index = parseInt(e);
        var enemy = this.mEnemyShipsArray[index];

        enemy.getSprite().y += enemy.getVelocity().y;

        if(enemy.getSprite().y > this.mScreenSize.height + 50 || enemy.isMarkedDestroy())
            this.mEnemyShipsArray.splice(index , 1);
    }

    this.mRenderer.render(this.mStage);
    requestAnimationFrame(this.update);
}

MainGameScene.prototype.setup = function()
{   
    this.mRenderer = renderer;
    this.mScreenSize = screenSize;

    this.MAX_SPAWN_RATE  = 3.0;
    this.SPACESHIP_SPPED = 5.0;
    this.ENEMYSHIP_SPEED = 3.8;

    this.mSpaceShip = {};
    this.mEnemyShip = {};

    this.mLastCalledTime = Date.now();
    this.mElapsed = 0.0;

    this.mStyle = 
    {
        font   : 'bold italic 36px Arial'
      , fill   : '#F7EDCA'
      , stroke : '#4a1850'
      , strokeThickness : 5
    }

    this.mCurrentScore = 0;         
    this.mScoreText = new PIXI.Text(this.mCurrentScore , this.mStyle);
    this.mScoreText.x = screenSize.width / 2.0;
    this.mScoreText.y = 30.0;

    this.mEnemyShipsArray = new Array();

    this.mStage = new PIXI.Container(); 

    this.mSpaceShip = new SpaceShip(this.mStage , "spaceship.png");
    this.mSpaceShip.setPixelPosition({x : 200 , y : 550});
    this.mSpaceShip.perceiveEnemyShips(this.mEnemyShipsArray);

    this.mStage.addChild(this.mSpaceShip.getSprite());
    this.mStage.addChild(this.mSpaceShip.getSprite());

    document.onkeydown = function()
    {
        var e = e || window.event;

        if(e.keyCode == '38') // up
        {
            //if((spaceship.getSprite().y + (spaceship.getSprite().height / 2.0)) <= screenSize.height)
                this.mSpaceShip.setVelocityY(-SPACESHIP_SPEED);
        }           

        if(e.keyCode == '40') // down
        {
            //if((spaceship.getSprite().y - (spaceship.getSprite().height / 2.0)) >= 0)
                this.mSpaceShip.setVelocityY(SPACESHIP_SPEED);
        }           

        if(e.keyCode == '37') // left
        {
            //if((spaceship.getSprite().x - (spaceship.getSprite().width / 2.0)) >= 0)
                this.mSpaceShip.setVelocityX(-SPACESHIP_SPEED);
        }           

        if(e.keyCode == '39') // right
        {
            //if((spaceship.getSprite().x + (spaceship.getSprite().width / 2.0)) <= screenSize.width)
                this.mSpaceShip.setVelocityX(SPACESHIP_SPEED);
        }
    }

    document.onkeyup = function()
    {
        var e = e || window.event;

        if(e.keyCode == '38' || e.keyCode == '40') // up and down
            this.mSpaceShip.setVelocityY(0);

        if(e.keyCode == '37' || e.keyCode == '39') // left and right
            this.mSpaceShip.setVelocityX(0);
    }

    self.update();
}

I am new to JavaScript and I could not get around with instances with this scripting language.

I would appreciate some help!

Answer 1

you should take this approach for using this with nested functions:

MainGameScene.prototype.setup = function(){       
    this.mRenderer = renderer;
    var self = this;
    ....
    document.onkeydown = function(){
        self.mSpaceShip.setVelocityY(-SPACESHIP_SPEED);
        ....
    }
    ....
}

Answer 2

It seems my problem is more related to calling instance method from another instance method.

My 'this' pointer always points to Loader class of the framework I am using. I can't seem to find the link here in SO but I was able to solve my problem by doing this:

var loader = new PIXI.loaders.Loader();
loader.add("_assets/textures/sprites.json");
loader.once("complete" , this.setup.bind(this));
loader.load();

The thing is, I have to bind my the method call to setup to this. this is always changing depending on the function scope.

Maybe I'll switch to another flavor of JavaScript like using TypeScript of CoffeeScript which allows me to do this things easily.

Thanks for helping out!