与PHP相比，我如何看待JavaScript中的成员变量

Question

I'm playing around with this JavaScript code that is used for a game in a HTML5 canvas element (in order to learn js). I have 3 questions I struggle to find answers relating to a "game' object which has some methods (see bellow).

1. In the "load" method "this" is used to set some member variables and to call on its own methods, but then in some of the other methods 'game' is used instead. Is there some good reasons for not using 'this' in these other methods as well (because they are both doing the same thing right)? (I've found an answer that say it can be done to make the code more clear in case the risk of changing the variable name is low, but why wouldn't "game" be used in both places then?)

2. I'm also a bit confused about the variables. Does both"this.audioPath = 'audio/';" and "Game.height = height;" set a member variable for the "game" object, and are they public or private?

3. "Game.input = {...}" and "" Game.frames = {}" are included as separate js files after the "game" file. but they are referenced in the "load" method of the "game" object ie "this.input.init();" and "this.frames.init();". I assume this means that they are two objects which are member variables of the "game" object, but don't they have to be initiated before you can use there methods?

I'm used to thinking in terms of PHP (classes) so this is all new and very confusing to me. I have been searching for answers but I find it very hard to know what to search for...

var Game = {
load: function(game) {
    // this.debug = true;
    this.audioPath = 'audio/';
    this.createCanvas(1200, 675);
    this.initGlobalVariables();
    this.loadedGame = game;
    this.loadScene('initial');
    this.input.init();
    this.frames.init();
    this.frames.play();
},

clearCanvas: function() {
    Game.ctx.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
},

createCanvas: function(width, height) {
    Game.height = height;
    Game.width = width;
    Game.canvas = document.createElement('canvas');
    Game.ctx = Game.canvas.getContext('2d');
    Game.canvas.width = width;
    Game.canvas.height = height;
    document.getElementById('canvas-wrapper').appendChild(Game.canvas);
},

getRandomNumber: function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
},

initGlobalVariables: function() {
    Game.loadedGame = {};
    Game.keysDown = [];
},

isCollision: function(a, b){
    return  a.x <= (b.x + b.width) &&
            b.x <= (a.x + a.width) &&
            a.y <= (b.y + b.height) &&
            b.y <= (a.y + a.height);
},

loadScene: function(scenes) {
    Game.scene = Game.loadedGame[scenes];
    Game.scene.init();
}
};

Answer 1

Is there some good reasons for not using 'this' in these other methods as well (because they are both doing the same thing right)?

this in javascript does not always point to the same object, but depends on how the function is called. Game does in contrast. This is most relevant when functions are passed as callbacks .

I'm also a bit confused about the variables. Does both"this.audioPath = 'audio/';" and "Game.height = height;" set a member variable for the "game" object, and are they public or private?

Yes, both set properties of the Game object. Properties in JavaScript are always public.

"Game.input = {...}" and "" Game.frames = {}" are included as separate js files after the "game" file. but they are referenced in the "load" method of the "game" object ie "this.input.init();" and "this.frames.init();". I assume this means that they are two objects which are member variables of the "game" object, but don't they have to be initiated before you can use there methods?

Yes, they are initialised before their methods are used.

Answer 2

1: In your case there is no difference, as you only have one single instance of the object, and you have a variable that references that instance. If it would be possible to have multiple instances, then you would need to use this to reference the current instance for the code to be usable for all instances. Also, even if you have a single instance, it doesn't have to store it in a plain variable. It could for example be a property of another object, or an item in an array.

2: Yes, they do set member variables. Member variables are always public, there is no concept of private members in Javascript. To have anything that is private, you would wrap code in a function so that you could declare variables that are private to that scope. There is no object scope in Javascript, only global scope and function scope.

3: Yes, the properties have to be assigned before you can call methods on them. The Game.load method thus have to be called after the properties are added to the object. The load method is just an ordinary method, it's not like a constructor that is called when the object is created, so there will be a call to it somewhere in the page.