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
– Ronen Cypis, Commented Dec 30, 2015 at 11:07

Sergio Tulentsev · Accepted Answer · 2015-12-30 11:08:30Z

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, 2015 at 11:08

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sempervivum Over a year ago

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?

Sergio Tulentsev Over a year ago

this in initialize is a Pong. this in callback of loadImages is something else (I'd guess, the callback itself).

Sempervivum Over a year ago

Quote from here: 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.

Sergio Tulentsev Over a year ago

@Sempervivum: "Pong.playing is undefined" - of course. It's a Pong, not the Pong.

Collectives™ on Stack Overflow

Cannot access variable in object from outside

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related