三行代码  ›  专栏  ›  技术社区  ›  Moiz Ratlamwala

无法更改JavaScript属性的值

  •  0
  • Moiz Ratlamwala  · 技术社区  · 2 月前

    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();

    我不熟悉javscript,并使用OOPs概念创建了一个小项目。我试图通过调用changeDirection方法来更改snakeDirection的值,但它不能在moveSnake方法中更新,moveSnake方法每800毫秒调用一次。 我该怎么做?

    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();
    
    
    3 回复  |  直到 2 月前
        1
  •  1
  •   Kain Akuma    2 月前

    必须将参数(事件)传递给func。

    const snake = new Snake();
    document.addEventListener('keydown', e => snake.changeDirection(e));
    
        2
  •  0
  •   Muhammad Awais Mumtaz    2 月前

    这就是我发现的问题 this.snakeDirection snakeDirection = e.key .

        3
  •  0
  •   Andy    2 月前

    这是一个与环境有关的问题 setInterval .如果将方法更改为类属性(基本上是箭头函数),则 this 如果理解得当,问题就会消失。

    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();
        4
  •  0
  •   Michael Han    2 月前

    错误的原因是函数changedDirection中的“this”不是对象a。它是对象文档。 所以,两位听众都下课了

    class Snake {
                
            
                constructor() {
                    setInterval(() => {
                        this.moveSnake();
                    }, 800);
                    this.snakeDirection = 'ArrowRight';
                    document.addEventListener('keydown', changeDirection);
                }
            
                moveSnake() {
                    console.log('moveSnake', this.snakeDirection) //ArrowRight
                }
                
            }
            
            let a = new Snake();
            function changeDirection(e) {
                a.snakeDirection = e.key;
                console.log('key pressed', e.key)
            }
    

    或者使用箭头功能

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