Cannot access variable in object from outside

Question

I didn't succeed in accessing the variable playing from outside the object Pong:

Pong = {
// some other objects
initialize: function (runner, cfg) {
    Game.loadImages(Pong.Images, function (images) {
        this.cfg = cfg;
        this.runner = runner;
        this.width = runner.width;
        this.height = runner.height;
        this.images = images;
        this.playing = false; // variable is defined here
        this.scores = [0, 0];
        this.menu = Object.construct(Pong.Menu, this);
        this.court = Object.construct(Pong.Court, this);
        this.leftPaddle = Object.construct(Pong.Paddle, this);
        this.rightPaddle = Object.construct(Pong.Paddle, this, true);
        this.ball = Object.construct(Pong.Ball, this);
        this.sounds = Object.construct(Pong.Sounds, this);
        this.runner.start();
    } .bind(this));
}, 
// some more functions 
isPlaying: function () { // I added this function to enable for access
    return this.playing; // here playing is undefined
},

start: function (numPlayers) {
    if (!this.playing) { // here playing is defined
        this.scores = [0, 0];
        this.playing = true;
        this.leftPaddle.setAuto(numPlayers < 1, this.level(0));
        this.rightPaddle.setAuto(numPlayers < 2, this.level(1));
        this.ball.reset();
        this.runner.hideCursor();
    }
},
// more objects and functions

This is a pingpong game. The complete page is this: http://ulrichbangert.de/div/webdesign/javascript/pong.html I cannot understand why this variable can be accessed in start and not in isPlaying. Why is this and what code do I have to use to access this variable? To enable for debugging I added calling isPlaying in the onclick event.

put together a minimal version of your page with JsFiddle, so we can easily help you — Ronen Cypis, Dec 30 '15 at 11:07

score 1 · Answer 1 · answered Dec 30 '15 at 11:08

1

This is one of the classic problems with javascript, this changing "unexpectedly".

Inside of that callback, this points to something else, not your object. One of solutions is to trap object reference in a closure.

initialize: function (runner, cfg) {
  var that = this; // <= "that" won't change.
  Game.loadImages(Pong.Images, function (images) {
      that.cfg = cfg;
      that.playing = false;

answered Dec 30 '15 at 11:08

Sergio Tulentsev

226,338
43
373
367

Thanks for this answer but it doesn't meet my question: My problem is not that the variable is changing unexpectedly. Instead this is intended. My problem is that I do not know how to access that variable from outside the object Pong. What is "this" in function initialize (It's not Pong and it's not Game) and how can it be accessed from outsinde Pong? – Sempervivum Dec 30 '15 at 14:38
`this` in `initialize` is a Pong. `this` in callback of `loadImages` is something else (I'd guess, the callback itself). – Sergio Tulentsev Dec 30 '15 at 14:48
Quote from here: http://stackoverflow.com/questions/1963357/this-inside-function "The this keyword refers to the object the function belongs to, or the window object if the function belongs to no object." confirms your statement: "this in initialize is a Pong". Unfortunately the debugger tells a different thing: Pong.playing is undefined. – Sempervivum Dec 30 '15 at 20:12
@Sempervivum: "Pong.playing is undefined" - of course. It's __a__ Pong, not __the__ Pong. – Sergio Tulentsev Dec 30 '15 at 20:16

Cannot access variable in object from outside

1 Answers1