When to use "this.game" and when only "this"

[jamespierce]

Hello guys,

I have been a long-time lurker on this forum. Most of my time spent here I wasn't even logged in but I have always enjoyed a ton of great answers here and even more interesting questions asked. Anyways, I don't want to waste your time with introducing myself and will allow myself to ask a question for the first time!

I am confused by the usage of "this." vs. "this.game". It seems that I can use both interchangeably without any errors popping up in the console and the same results on the screen. Here is an example:

var MyGame = {};

MyGame.game = new Phaser.Game(800, 600, Phaser.AUTO, '');

MyGame.Boot = function() {};

MyGame.Boot.prototype = {
	preload: function() {},
	
	create: function() {
		this.game.stage.backgroundColor = '#FFFFFF';
		
		this.game.physics.startSystem(Phaser.Physics.ARCADE);
		
		this.state.start('Preload');
	},

    update: function() {}
};

The three lines in the "create" method can all be written beginning with "this.game" or just "this." For example:

this.game.stage.backgroundColor = '#FFFFFF';
this.stage.backgroundColor = '#FFFFFF';
		
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.physics.startSystem(Phaser.Physics.ARCADE);
		
this.game.state.start('Preload');
this.state.start('Preload');

They work just fine in both ways. How come that is so? When do I use "this.game" and when only "this."?

I have been following along these tutorials which is also where I got the above code snippets from:
SpaceHipster Tutorial: https://gamedevacademy.org/html5-phaser-tutorial-spacehipster-a-space-exploration-game/
BunnyDefender YT Series: link

 

[jamespierce]

bump

(it took a couple days for my first post to be approved so now it's already on 2nd page by the time it's visible for others. I hope it's okay I bump it once, will not repeat!)

[JazzAceman]

Both are referencing the same objects so you can use both. Phaser adds some important references directly to your state, so you can use them without allways calling the game object. Its just for convenience. 

[jamespierce]

1 hour ago, JazzAceman said:

Both are referencing the same objects so you can use both. Phaser adds some important references directly to your state, so you can use them without allways calling the game object. Its just for convenience. 

Thank you so much for clarifying!!

[BdR]

The `game` variable within the `Boot` object is set to references the global game-object you created earlier in the line with "MyGame.game" (that is, it is set somewhere in the Phaser code, not in your code example above). Like JazzAceman said; Boot.game.state and Boot.state both references the same object. Therefor, both the `game` and the `Boot` state have the properties stage and physics, and that's why the code works in both cases.

Also, the keyword `this` in JavaScript is a little tricky because it depends on how the function is called. It works differently compared to the keyword this also used in Java and C++, see a short explanation here. If you have time to go into it a little more, I recommend reading You Don't Know JS (free online book series) which also has a part about "this & Object Prototypes".

[jamespierce]

15 hours ago, BdR said:

Also, the keyword `this` in JavaScript is a little tricky because it depends on how the function is called. It works differently compared to the keyword this also used in Java and C++, see a short explanation here. If you have time to go into it a little more, I recommend reading You Don't Know JS (free online book series) which also has a part about "this & Object Prototypes".

Thank you for these resources in addition to explaining the references to the game object in Phaser.

[Skeptron]

Mark post as solved please if you're happy with the solution they've provided.

[jamespierce]

17 hours ago, Skeptron said:

Mark post as solved please if you're happy with the solution they've provided.

I can't find the option to mark as solved. Under "Moderation Actions" I only have "hide" available. Is that it?