пример наследования:
есть 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() {
$('
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. а благодаря наследованию он должен найтись. но не находится. в чём я ошибаюсь?
Ответ
Основная проблема в том, что свойства level нет ни в одном из классов поэтому всегда выводится undefiend
Кроме того в данном случае не нужно наследование. Проще указать это свойство через конструктор.
var Game = function(parentGameElementTag) {
this.parentGameElementTag = parentGameElementTag;
this.gameElementId = 'game';
this.levelObj = new Level(1);
this.init();
};
Game.prototype = {
init: function() {
$('
Уровень: ' + 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;
}
Комментариев нет:
Отправить комментарий