проблема с наследованием через конструктор

#javascript

пример наследования:

есть 2 конструктора: Game, Level. на их основе я создаю 2 объекта, таким образом,
чтобы level наследовался от game:

var Game = function(parentGameElementTag) {
  this.parentGameElementTag = parentGameElementTag;
  this.gameElementId = 'game';
  this.levelObj = new Level();  

  this.init();
};

Game.prototype = {
  init: function() {  
    $('
').appendTo(this.parentGameElementTag);   
  }
 };

 var Level = function() { 
  var self = this;

  this.fieldElementId = 'field';  
  this.levelScreenDisplay('body');  
};

//Level.prototype = Game;
Level.prototype = Object.create(Game.prototype);

Level.prototype = {

  levelScreenDisplay: function(parentElementTag) {
    $('
Уровень: ' + this.level
+ '
').appendTo(parentElementTag);   

    setTimeout(function() { 
      $('
Нажмите любую клавишу
для старта
').appendTo('#levelBeginLabel');

      document.onkeypress = function() {
        document.onkeypress = undefined;
        $('#levelBeginLabel').remove();
      };          
    }, 1000);
  }
};

var app = new Game('body');


в результате на странице должен выводиться номер уровня. которого нет в level, но
который есть в game. а благодаря наследованию он должен найтись. но не находится. в
чём я ошибаюсь?
    

Ответы

Ответ 1

Основная проблема в том, что свойства level нет ни в одном из классов поэтому всегда
выводится undefiend.

Кроме того в данном случае не нужно наследование. Проще указать это свойство через
конструктор.



var Game = function(parentGameElementTag) {
  this.parentGameElementTag = parentGameElementTag;
  this.gameElementId = 'game';
  this.levelObj = new Level(1);

  this.init();
};

Game.prototype = {
  init: function() {
    $('
').appendTo(this.parentGameElementTag);
  }
};

var Level = function(level) {
  var self = this;
  this.level = level;

  this.fieldElementId = 'field';
  this.levelScreenDisplay('body');
};

Level.prototype = {

  levelScreenDisplay: function(parentElementTag) {
    $('
Уровень: ' + this.level
+ '
').appendTo(parentElementTag);

    setTimeout(function() {
      $('
Нажмите любую клавишу
для старта
').appendTo('#levelBeginLabel');

      document.onkeypress = function() {
        document.onkeypress = undefined;
        $('#levelBeginLabel').remove();
      };
    }, 1000);
  }
};

var app = new Game('body');
.level_begin_label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #000;
  padding-top: 20px;
  color: #fff;
  text-align: center;
  font: 20px arial, sans-serif;
}
.any_key_invitation {
  margin-top: 10px;
  font-size: 16px;
}
.game {
  /*	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;*/
  z-index: 10;
  position: relative;
  background: #000;
  width: 300px;
  height: 100%;
  margin: 0 auto;
  padding-top: 40px;
  color: #fff;
}





UPDATE: обновление после комментария.
В данном случае проще всего сохранить ссылку на Game внутри создаваемого объекта Level.



var Game = function(parentGameElementTag) {
  this.parentGameElementTag = parentGameElementTag;
  this.gameElementId = 'game';
  this.level = 1; //например
  this.levelObj = new Level(this); // передаем ссылку game объекта в конструктор
для уровня

  this.init();
};

Game.prototype = {
  init: function() {
    $('
').appendTo(this.parentGameElementTag);
  }
};

var Level = function(game) {
  var self = this;
  this.level = game.level; // можно опустить эту строучку и получать значение через
this.game.level
  this.game = game;
  this.fieldElementId = 'field';
  this.levelScreenDisplay('body');
};

Level.prototype = {

  levelScreenDisplay: function(parentElementTag) {
    $('
Уровень: ' + this.level
+ '
').appendTo(parentElementTag);

    setTimeout(function() {
      $('
Нажмите любую клавишу
для старта
').appendTo('#levelBeginLabel');

      document.onkeypress = function() {
        document.onkeypress = undefined;
        $('#levelBeginLabel').remove();
      };
    }, 1000);
  }
};

var app = new Game('body');
.level_begin_label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #000;
  padding-top: 20px;
  color: #fff;
  text-align: center;
  font: 20px arial, sans-serif;
}
.any_key_invitation {
  margin-top: 10px;
  font-size: 16px;
}
.game {
  /*	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;*/
  z-index: 10;
  position: relative;
  background: #000;
  width: 300px;
  height: 100%;
  margin: 0 auto;
  padding-top: 40px;
  color: #fff;
}



Ответ 2

// для определения наследования 
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null 
                  ? Object.create(b) 
                  : (__.prototype = b.prototype, new __());
};




var Game = (function () {
    function Game(tag) {
        this.init();
    }
    Game.prototype.init = function () { 
       // ...
    };
    Object.defineProperty(Game.prototype, "LevelNumber", {
        get: function () {
            return 123;
        },
        enumerable: true,
        configurable: true
    });
    return Game;
})();

// Level наследует Game
var Level = (function (_super) {
    __extends(Level, _super);
    function Level(tag) {
        _super.call(this, tag);
    }
    return Level;
})(Game);




var lvl = new Level("body");
alert(lvl.LevelNumber);  // выводит: 123  -- LevelNumber определен в Game