Instance method not a 'FUNCTION' [duplicate]

Question

This question already has answers here:

How to access the correct `this` inside a callback (16 answers)

Closed 10 years ago.

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!

• Arun P Johny: which line/call is causing the error
• nww04: I am so sorry the line 'this.update'. I tried echoing the value for this and self. This points to the framework's Loader class I am using. The function setup is being called when the loader finishes loading the files. I tried echoing self but it is pointing to Window. I think nothing superficial there. It is having the value it should have. My frustration comes from the point I don't know how to get hold of the 'instance' of the class. Another thing, if this is pointing to Loader class, this is a big problem! All of calls to this are from Loader's instance. Im not sure how to do this correctly

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

• nww04: Wow, thats what self is used for. Ok hold on. I will try to run some steps for 'this'. Because I can't still refer to 'MainGameScene' class instance if 'this' is totally pointing to the framework's Loader.
• nww04: This will not work. this is pointing still to Loader class.

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!