What does keyword 'this' refer to in code?

[ldurniat]

Hi,

 

I' working on simple game in XDK Intel and Phaser lib. I use fresh template from XDK and I can not understand why this code work. A specially What does keyword 'this' refer to in code(init function) below? I have read about closure function but it doesnt help me:(

 

Game.js:

BasicGame = {};BasicGame.Game = function (game) {};BasicGame.Game.prototype = {    init: function () {        this.input.maxPointers = 1;       this.stage.disableVisibilityChange = true;        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;       this.scale.pageAlignHorizontally = true;        this.scale.pageAlignVertically = true;        this.scale.forceOrientation(false, true);        this.scale.setResizeCallback(this.gameResized, this);       this.scale.updateLayout(true);       this.scale.refresh();    },    preload: function () {        this.load.image('logo', 'asset/phaser.png');    },    create: function () {        this.logo = this.add.sprite(            this.world.centerX,             this.world.centerY,            'logo');        this.logo.anchor.setTo(0.5, 0.5);    },    gameResized: function (width, height) {}};

app.js

(function () {    var game = new Phaser.Game(480, 640, Phaser.AUTO, 'game');    game.state.add('Game', BasicGame.Game);    game.state.start('Game');})();

I have found in doc of Phaser.StateManager:

 

The State can be either a Phaser.State object (or an object that extends it), a plain JavaScript object or a function. If a function is given a new state object will be created by calling it.

 

BasicGame.Game is a function but why keyword 'this' from inside may refer to game object. I dont know.

Edited December 28, 2015 by ldurniat

[chg]

Those are prototype methods for the Game class, within those functions the 'this' keyword will refer to the Game instance the method has been called for.

[ldurniat]

Those are prototype methods for the Game class, within those functions the 'this' keyword will refer to the Game instance the method has been called for.

I'm not sure what you try to say me. Can you tell me that in simpler way?

Do you mean object for what is invoked init method? 

I have found this code in phaser/StateManager.js

else if (typeof state === 'function')        {            newState = new state(this.game);        }

In my example state object is BasicGame.Game. Is this correct?

[chg]

Re your edit:

BasicGame.Game is a function but why keyword 'this' from inside may refer to game object. I dont know.

It's a class / constructor

 

I'm not sure what you try to say me. Can you tell me that in simpler way?

No, I don't believe that is something I can do.

 

I have found this code in phaser/StateManager.js

else if (typeof state === 'function')        {            newState = new state(this.game);        }

In my example state object is BasicGame.Game. Is this correct?

You have a "module" BasicGame which has a "class" Game and that has prototype "methods": init, preload, create, and gameResized.

Quotes in the preceding sentence because Javascript as a language uses "prototypal inheritence" model of OO (rather than Class-based OO) so it doesn't strictly enforce those patterns the way Java or c++ might

[zatch]

Usually, "this" refers to "this object." For example: within Game, "this" refers to this instance of the Game object; within StateManager, "this" refers to this instance of the StateManager object. It's extremely useful! You will use "this" often and it will make your life much easier. Just when you think you understand it perfectly, however, you'll find that there's more to learn about scoping properly.

[ldurniat]

To chg and zach:

 

Thanks for answer. I have to learn MORE about JS:) 

[cdelstad]

Here's a good article in understanding the 'this'. I believe Phaser usually uses this to pass the 'context.'

 

Understand JavaScript’s “this” With Clarity, and Master It

 

Hope this helps,

-Chad

[ldurniat]

/**    * Links game properties to the State given by the key.    *    * @method Phaser.StateManager#link    * @param {string} key - State key.    * @protected    */    link: function (key) { --->       this.states[key].game = this.game;

This what I was looking for:) Last line. Now I know why code(see my first post) in template work. Thanks everbody for help. It is a time for a next step in creating my first cool game:):)