Why this is no longer this?

[przemoo83]

In this code fragment:

BasicGame.Game.prototype = {    update: function () {            if (this.game.input.activePointer.isDown && this.plane !=null) {                this.fire();        };        if(this.plane != null && this.plane.x > this.W) {               this.plane.x = -400;            this.plane.body.velocity.x = 0;            this.b.input.enabled = true;            this.flying = false;            this.b.setFrames(0);        };        //collisions        this.game.physics.arcade.collide(this.ground, this.bombs, this.collisionHandler);    },    collisionHandler: function (bomb, ground) {       this.bullet.kill();}};

I run across an issue where collisionHandeler() function doesn't work because "this" is no longer holding reference to a main Game Object. I tried to save 'this' value in another variable but I still cannot  get it working. What may be the problem?

And also why is that this object oriented code structure is recommended for example in Project Templates but at the same time all examples at http://phaser.io/examples are written in functions-like style? As a beginner in JS and Phaser I find it difficult to use the examples in a code like above. What would you recommend for me?

[demisephi]

check in documentation one of parameters to collide is 'scope' pass this as that parameter

[Vassildador]

As for the actual reason why it's not ran in the same context (scope) is due to the way contexts work in JS when calling methods on objects.

When calling a function in javascript, "this" always refers to the object the function was called on. You pass your function to "this.game.physics.arcade.collide", and it is the object containing this method that will call your callback (the function you passed), being "this.game.physics.arcade". This means that by default "this.game.physics.arcade" will be assigned to "this" when your function is actually ran.

 

The default behaviour (luckily) is overridable, which is just what Phaser does when you pass it the "scope" parameter. It will change the context your function runs in.

 

Have a look at this if my (probably crappy) explanation wasn't entirely clear

[Luketep]

Just make sure that you bind all callback to their corresponding contexts:

// Function.prototype.bind(context, args)this.game.physics.arcade.collide(this.ground, this.bombs, this.collisionHandler.bind(this));

[drhayes]

Normally I'd agree, but in this case you're probably better off passing the scope parameter. When you say ".bind(this)" the JS engine makes a completely new function. In the case of your collision handler it's making that new function every frame. That puts pressure on the garbage collector to do its thing and stop the world while it does so, making it look like your game is skipping frames.