我正在尝试使用javascript中的OOP构建一个简单的启动屏幕。我想创建一个允许用户循环浏览游戏菜单的代码,但我偶然发现了一个错误。我试图在this.state, this.selection
方法内访问control()
,但是即使它们都在类的constructor()
函数中声明,它们都返回未定义。
这是我的一些代码
class Game {
constructor() {
this.menu = ['Start', 'Load', 'Exit'];
this.selection = 1;
this.canvas = document.getElementById('game');
this.ctx = this.canvas.getContext('2d');
this.state = 'menu';
window.addEventListener('keydown', this.control, false);
this.splash();
}
control(e) {
console.log(e.keyCode);
console.log(this.state, this.selection);
if (this.state == 'menu') {
console.log('true');
splash(e.keyCode);
} else {
return e.keyCode;
}
}
splash(key) {
console.log('successfully initialized');
if (key == 38) {
this.selection--;
console.log(this.menu[this.selection]);
} else if (key == 40) {
this.selection++;
console.log(this.menu[this.selection]);
}
}
}
var game = new Game;
当我使用console.log(this.state, this.selection);
时,两个属性都返回undefined,我在做什么错?
答案 0 :(得分:4)
问题是事件处理程序中的this
不再引用您的游戏实例。您可以使用bind(this)
解决此问题。
另一个问题是调用this
时丢失了splash
。我也在下面的示例中修复了该问题。
class Game{
constructor(){
this.menu = ['Start', 'Load', 'Exit'];
this.selection = 1;
this.canvas = document.getElementById('game');
//this.ctx = this.canvas.getContext('2d');
this.state = 'menu';
window.addEventListener('keydown',this.control.bind(this),false);
this.splash();
}
control(e){
console.log(e.keyCode);
console.log(this.state, this.selection);
if(this.state == 'menu'){
console.log('true');
this.splash(e.keyCode);
}else{
return e.keyCode;
}
}
splash(key){
console.log('successfully initialized');
if(key == 38){
this.selection--;
console.log(this.menu[this.selection]);
}else if(key == 40){
this.selection++;
console.log(this.menu[this.selection]);
}
}
}
var game = new Game();
<div id="game"></div>