Question

我正在尝试使用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，我在做什么错？

Answer 1

问题是事件处理程序中的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>

JavaScript中方法内部的未定义属性

1 个答案: