Javascript 有没有一种方法可以使用命名箭头函数来维护对象内部的词法作用域？

说明： 我正在使用

window.addEventListener（）

并希望调用一个命名函数（不是匿名函数），因为我希望能够在以后的阶段使用removeEventListener。。 但是，eventHandler中的

console.log

是一个箭头函数，它显示“this”仍然指向窗口对象，而不是游戏对象

PS：忽略代码的其他部分，因为我正在重构它，其余部分可能仍然不完整， 我知道我可以使用构造函数，但我正处于学习阶段，在我研究构造函数之前，我想看看这是否可以在没有构造函数的情况下完成

function makeGameObject() {

  return {

    score: 0,
    level: 1,


    start() {
      for (let coin of coins) {
        this.moveCoin(coin);
      }
      window.addEventListener("keydown", this.gameOn)
    },

    stop() {
      window.removeEventListener("keydown", this.gameOn);

    },


    gameOn: (evt) => {
      console.log(this);
      if (evt.key.toUpperCase() === "W" || evt.key === "ArrowUp") {
        this.moveObject(player, 30, 'up');
      } else if (evt.key.toUpperCase() === "S" || evt.key === "ArrowDown") {
        this.moveObject(player, 30, 'down');
      } else if (evt.key.toUpperCase() === "A" || evt.key === "ArrowLeft") {
        this.moveObject(player, 30, 'left');
        player.style.transform = 'scale(-1,1)';
      } else if (evt.key.toUpperCase() === "D" || evt.key === "ArrowRight") {
        this.moveObject(player, 30, 'right');
        player.style.transform = 'scale(1,1)';
      }

      for (let coin of coins) {
        if (this.isTouching(player, coin)) {
          this.moveCoin(coin);
          score++;
          h1.innerText = score;
        }
      }
    },

下面是对函数的调用：

const player = document.querySelector("#player");
const coins = document.querySelectorAll(".coin");
const body = document.querySelector("body");
const h1 = document.querySelector("h1");

const game = makeGameObject();
game.start();

---

一种方法是动态创建绑定版本的

gameOn（）

，并使用它：

{
  // ...

  start() {
    for (let coin of coins) {
      this.moveCoin(coin);
    }
    if (this.boundGameOn === undefined) {
      this.boundGameOn = this.gameOn.bind(this);
    }
    window.addEventListener("keydown", this.boundGameOn)
  },

  stop() {
    window.removeEventListener("keydown", this.boundGameOn);
  },

  // ...
}

理想情况下，您可以在构造函数中执行此操作。如果使用构造函数而不是对象文字，则可以执行以下操作：

function GameObject () {
  this.boundGameOn = this.gameOn.bind(this)
}

GameObject.prototype = {
  // rest of code ..
}

事实上，在React应用中，这种设计模式并不少见：

function GameObject () {
  this.gameOn = this.gameOn.bind(this); // MAGIC!!
}

GameObject.prototype = {
  // ...

  start() {
    for (let coin of coins) {
      this.moveCoin(coin);
    }
    window.addEventListener("keydown", this.gameOn)
  },

  stop() {
    window.removeEventListener("keydown", this.gameOn);
  },

  // ...
}

MAGIC行确保

gameOn（）

中的

这个
始终指向游戏对象，因为您正在用绑定版本的自身覆盖它

这在ES6类语法中看起来稍微干净一些（只是稍微干净一点，我个人对这两种语法都没有偏好）：

对于ES7提出的实验类属性语法，它更简单：您可以只使用一个箭头函数（现在不要直接使用这个函数，2020年中期，因为Safari不支持它，但是如果您使用Babel或Typescript，您可以编译到ES6）：

在这种情况下，
这个
受箭头函数的约束。
90%的时间构造函数没有做任何有用的事情，但是你会发现自己处于这样的情况，构造函数正是你所需要的。这是一个很好的答案。非常方便！
class GameObject {

  constructor () {
    this.gameOn = this.gameOn.bind(this); // MAGIC!!
  }

  // ...

  start() {
    for (let coin of coins) {
      this.moveCoin(coin);
    }
    window.addEventListener("keydown", this.gameOn)
  }

  stop() {
    window.removeEventListener("keydown", this.gameOn);
  }

  // ...
}

class GameObject {
  // ...

  start = () => {
    for (let coin of coins) {
      this.moveCoin(coin);
    }
    window.addEventListener("keydown", this.gameOn)
  }

  stop = () => {
    window.removeEventListener("keydown", this.gameOn);
  }

  // ...
}