Can't changing the value of JavaScript property-CodePudding

class Snake {
    snakeDirection = 'ArrowRight';

    constructor() {
        setInterval(() => {
            this.moveSnake();
        }, 800);

        document.addEventListener('keydown', this.changeDirection);
    }

    moveSnake() {
        console.log('moveSnake', this.snakeDirection) //ArrowRight
    }

    changeDirection(e) {
        this.snakeDirection = e.key;
        console.log('key pressed', e.key)
    }
}

let a = new Snake();

I'm new to javscript and creating a small project using OOPs concept. I am trying to change the value of snakeDirection by calling changeDirection method but it's can't get updated in moveSnake method which is gets called every 800ms. How will I do this?

class Snake {
    snakeDirection = 'ArrowRight';

    constructor() {
        setInterval(() => {
            this.moveSnake();
        }, 800);

        document.addEventListener('keydown', this.changeDirection);
    }

    moveSnake() {
        console.log('moveSnake', this.snakeDirection) //ArrowRight
    }

    changeDirection(e) {
        this.snakeDirection = e.key;
        console.log('key pressed', e.key)
    }
}

let a = new Snake();

CodePudding user response：

You must pass an argument (event) to func.

const snake = new Snake();
document.addEventListener('keydown', e => snake.changeDirection(e));

CodePudding user response：

This is the problem that I have spotted this.snakeDirection cant be used because it is not in the constructor method. use just snakeDirection = e.key.

CodePudding user response：

It's a context issue with setInterval. If you change your methods to class properties (basically arrow functions) so that this is understood properly the problem disappears.

class Snake {

  snakeDirection = 'ArrowRight';
  
  constructor() {
    document.addEventListener('keydown', this.changeDirection);
    setInterval(this.moveSnake, 800);
  }
  
  moveSnake = () => {
    console.log('moveSnake', this.snakeDirection);
  }

  changeDirection = (e) => {
    console.log(e.key)
    this.snakeDirection = e.key;
  }

}

let a = new Snake();