Javascript - Closure failing when calling external functions

Question

I'm currently making a tiny game structured like so:

let Game = function() {

    let privateVar;
    // private would be an example private variable assigned later
    // Other private variables go here

    return {
        Engine: function() {

            // More specific private variables

            init: function() {
                privateVar = this.sampleValue;
                // Game.Engine.sampleValue doesn't help either

                // Start up everything, for example, calling a Graphics method:
                Game.Graphics.method1();
            },

            sampleValue: 10,

            // Other methods
        }

        Graphics: Graphics()
    }
}

function Graphics() {

    // Visuals-specific private variables

    return {

        method1: function() {
            console.log(privateVar);
            // This would complain about the variable not being defined
        }

        // methods

    }
}

Game.Engine.Init();

The idea is to separate the visual code from the internal code by calling the Graphics() function in the Graphics method (so I can for example build the Graphics() function in a separate file for example). However, when I do this, the Graphics method loses the private variable I declared at the beginning and assigned at the init method, and spits out Uncaught ReferenceError: private is not defined whenever it's called by some method in Graphics.

I guess one solution would be just reassigning those privates in Graphics(), but that would somewhat kill the purpose. Anyone has a better idea? Thanks in advance.

EDIT: Made the code a bit easier to understand what I'm getting at

It's not clear to me what's your actual question. Is something not working like you would expect? If so, please provide a reproducible example. — abl, Jan 25 '17 at 13:22
The code snippet is given above is syntacticaly wrong. Please correct that. — alicanerdogan, Jan 25 '17 at 13:23

score 0 · Answer 1 · answered Jan 25 '17 at 13:25

If you want private variables your Graphics type should not access them. How about declaring public variables instead ?

Like this for instance:

let Game = function() {
    this.publicVar = "value";
}

Or you can declare getters to access private fields and pass Game instance to the Graphics type. Like this :

let Game = function() {

    let privateVar = "value";
    this.getPrivateVar = function() {
        return privateVar;
    }

}

function Graphics(game) {

    // ...

}

score 0 · Answer 2 · answered Jan 25 '17 at 13:48

I think that you are trying to use O.O. in javascript. Javascript is prototyped, so, the way you will use O.O. is different than usual languages. see mozilla reference

I think you should create js classes like these:

/**
 * @class  Game Class
 */
function Game() {

    this.privateProperty;

    this.engine = new Engine(); //engine object of this game
    this.graphics = new Graphics(); //graphics object of this game
}

Game.prototype.oneGameMethod = function(){

};


/**
 * @class Engine Class
 */
function Engine(){
    this.privateProperty;   

}

Engine.prototype.oneEngineMethod = function(){

};


/**
 * @class  Graphics class
 */
function Graphics() {

    // Visuals-specific private variables
    this.visualProperty;
}
Graphics.prototype.oneMethodExample = function(){

};

Than you can create an Game object and call its methods and so on:

var myGame = new Game();

Javascript - Closure failing when calling external functions

2 Answers2