使用 addEventListener 覆盖模块中的属性的问题

Question

我在将值写入 addEventListener 内的变量并将其用作对象属性时遇到问题。关键字 this 显示 Player 对象，但选择属性仍然为空，但在 addEventListener 内一切正常。抱歉我的英语不好，但我真的需要帮助。

export class Player{
constructor(){
    this.board = document.querySelector('.playerMoveImg');
    this.score = 0;
    this.choice = null;
}
moveChoice = () => {
    const localChoise = document.addEventListener('click',(event)=>{
        if(event.target.value !== undefined){
            this.choice = event.target.value;
            this.board.style.backgroundImage =`url("src/img/Player${this.choice}.jpg")`;
        }
    })
    console.log(this.choice); //shows null //expect showing event.target.value
}

}

import {Player} from './player.js'
const player = new Player();
player.moveChoice();

Answer 1

它们是method 语法和arrow function 语法之间的区别。

export class Player{
  constructor(){
    this.board = document.querySelector('.playerMoveImg');
    this.score = 0;
    this.choice = null;
  }
  // instead of moveChoice = () => {
  // use:
  moveChoice() {
    const localChoise = document.addEventListener('click',(event)=>{
      if (event.target.value !== undefined){
        this.choice = event.target.value;
        this.board.style.backgroundImage =`url("src/img/Player${this.choice}.jpg")`;

        console.log(this.choice); // we need to move this log into the callback
      }
    })
  }
}

问题在于，由于 this 在箭头函数中绑定到父级 this，而您在这里没有父级作用域，所以它被绑定为 null

如果你想使用箭头函数，你必须在constructor调用期间设置方法：

export class Player{
  constructor(){
    this.board = document.querySelector('.playerMoveImg');
    this.score = 0;
    this.choice = null;
    this.moveChoice = () => {
      // in this case, the arrow function can find the parent this
      // it will use the same one as the constructor
      const localChoise = document.addEventListener('click',(event)=>{
        if (event.target.value !== undefined){
          this.choice = event.target.value;
          this.board.style.backgroundImage =`url("src/img/Player${this.choice}.jpg")`;

          console.log(this.choice); //shows null //expect showing event.target.value
        }
      })
    }
  }
}