Problem mit Zugriff auf Variable in Objekt

[Sempervivum]

Hallo,
ich schaffe es nicht, von außerhalb auf die Variable playing in diesem Objekt zuzugreifen:

Pong = {
    // einige andere Objekte
    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; // hier wird die Variable definiert
            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));
    },

    startDemo: function () { this.start(0); },
    startSinglePlayer: function () { this.start(1); },
    startDoublePlayer: function () { this.start(2); },

    isPlaying: function () {
        return this.playing; // hier ist sie undefiniert
    },

    start: function (numPlayers) {
        if (!this.playing) {
            this.scores = [0, 0];
            this.playing = true; // hier ist sie definiert
            this.leftPaddle.setAuto(numPlayers < 1, this.level(0));
            this.rightPaddle.setAuto(numPlayers < 2, this.level(1));
            this.ball.reset();
            this.runner.hideCursor();
        }
    },
    // weiter Objekte und Funktionen

In der Funktion start() ist playing definiert, in isPlaying, das ich hinzu gefügt habe, jedoch nicht. Mit dem Debugger habe ich mich überzeugt, dass die Funktion initialize() mit der Definition zuvor aufgerufen wurde.
Es handelt sich um ein Pingpong-Spiel, hier die vollständige Seite:
http://ulrichbangert.de/div/webdesign/javascript/pong.html

 

[Tronjer]

kA was mit numPlayers übergeben wird, aber Zeile 27 in deinem Script ist undefined, weil this.playing nicht im Scope existiert. Zeile 37 referenziert nicht das this.playing von Zeile 10, sondern deklariert die Variable innerhalb der Funktion neu.

var foo = {
  baz: function() {
    this.bleh = "Hello World";
  },
  bar: function() {
    return this.bleh;
  },
  blub: function() {
    if(!this.bleh) {
      this.bleh = true;
    } else {
      this.bleh = "Hi there";
    }
    return this.bleh;
  }
}
foo.bar(); //undefined
foo.blub(); //true

Falls du dich für OOP in Vanilla JS interessiert, suche dir ein Design Pattern und erarbeite dir daran die Grundlagen, bsw. das Module Pattern:
https://toddmotto.com/mastering-the-module-pattern

Für den gegenwärtigen Stand der Webentwicklung benötigst du das allerdings nicht zwingend, weil Frameworks Highlevel-Abstraktionen von Vanilla JS in Form eigener Funktionen mitbringen. Wenn ich in Angular einen Controller deklariere, wird ein Konstruktor erzeugt, aber was da genau im Hintergrund passiert, muss ich nicht unbedingt wissen. Die nähere Zukunft heißt Web Components, und mit ES6 erhalten Klassen Einzug in JS:
http://www.2ality.com/2015/02/es6-classes-final.html

 

[Sempervivum]

Tut mir Leid, da habe ich im Code etwas missverständlich kommentiert. Sollte so aussehen:

    start: function (numPlayers) {
        if (!this.playing) { // hier ist sie definiert
            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();
        }
    },

Ich verstehe nicht, warum die Variable in start() sichtbar ist, aber nicht in isPlaying(). Mit welchem Code kann ich von außerhalb auf die Variable zugreifen?

 

[Tronjer]

Das this in Zeile 2 referenziert das Window Object und der Not Operator sorgt dafür, dass die Auswertung entweder true oder false aber nicht undefined sein kann. Gib mal in der Konsole !this.foo, this.foo und this.navigator ein, um die Unterschiede zu sehen.

Der einfachste Ansatz um auf Eigenschaften und Methoden eines Objekts zuzugreifen ist das Objektliteral.

var person = {
    name: 'John',
    message: function() {
        return 'Hello ' + this.name;
    },
    greetings: function() {
        return this.message();
    }
}
person.greetings();