Usage of "this" in JS & 'Full Screen Mobile' project template

[FriarBabs]

Hi all. I am wondering why there is such extensive usage of the "this" keyword in the "Full Screen Mobile" project template (included with Phaser, I am using v2.4.4).

 

Code sample from 'Full Screen Mobile' project template:

BasicGame.Boot.prototype = {    init: function () {        this.input.maxPointers = 1;        this.stage.disableVisibilityChange = true;        this.stage.backgroundColor = '#000000';        if (this.game.device.desktop)        {            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.scale.setMinMax(160, 240, 640, 960);            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;        }        else        {            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.scale.setMinMax(160, 240, 640, 960);            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.forceOrientation(true, false);            this.scale.setResizeCallback(this.gameResized, this);            this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);        }    }

Code sample from phaser.io 'examples':

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() {    game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');}var s;function create() {    s = game.add.sprite(game.world.centerX, game.world.centerY, 'bot');    s.anchor.setTo(0.5, 0.5);    s.scale.setTo(2, 2);    s.animations.add('run');    s.animations.play('run', 10, true);}

What difference does this make? Why do I have to use it? Is it considered 'best practice'? Does it affect anything if I don't include it?

[Skeptron]

In both example you make an extensive usage of the things you are referring to.

 

In the first example you modify BasicGame.Boot from within its own init() function, so you have to use this to make JS understand what you are modifying (that is, BasicGame.Boot).

 

In the second example, you are modifying a sprite s, thus the same way you have to precise s everywhere so that the code knows what it's applying changes to.

 

Is that answering your question?

[ragnarok]

"this" in Javascript is actually the "scope" or "owner" of the function.

function log_test() {  console.log(this.a); }var oneObject = { a: "ownedByFirstObject", log_it: log_test};var anotherObject ={ a: "ownedByOtherObject", log_it: log_test};oneObject.log_it(); // returns "ownedByFirstObject"anotherObject.log_it();  // returns "ownedByOtherObject"

Long story short: Using "this" (especially in a protoype) gives the option to apply the same code to a different object (And, yeah, javascript's "this" might be very strange for someone coming from a class-oriented language).

 

Another usecase might be to rename the parent object without having to rewrite the code. In the Phaser example, rename "var game = ..." into "var game2 = ..." and you'd have to rewrite "game.load..." into "game2.load..." and "game.add" into "game2.add..." and so on. Using "this.game" instead, would have prevented that (Mostly because phaser adds "this.game" to every game state ( which in this case is the unnamed object "{ preload: preload, create: create, update: update, render: render }")).

[mattstyles]

JS is prototypical, although prototypal inheritance can be mangled to look a little like classical inheritance. The "Full Screen" example mangles the prototype (actually, you should be careful just resetting the prototype, it doesnt always matter, and the reasons why get a little tricky), it adds a new method to the `class`. Within this new method `this` references the object you instantiated with `new`, but, beware, JS is delightfully quirky and there are many ways to change the scope of a function, the easiest way to trick yourself is by passing functions around, as you would do when assigning event handler callbacks for example, but, again, JS being what it is, there are a couple of ways to re-attach the scope you probably expect (although be aware that changing the scope of an executing method is extremely powerful and can be very useful).

 

There is lots of info available on the web, check out stuff about object-oriented or classical inheritance in JS.

 

Also check out `.bind`, `.call` and `.apply` which explicitly deal with scope.

 

A further source of info relates to JS classes. Although they are not supported in too many places currently the latest JS spec specifies the class keyword to create classes, note that at present this is almost certainly just sugar surrounding existing methods of creating classes in JS so feel free to play with prototype and extending or implementing other prototypes or functions. It's a powerful tool to add to your JS toolbox.