使用函数声明与函数表达式在模块模式内切换变量

问题描述

我有一个模块模式，其中的变量将currentPlayer设置为1。我使用函数表达式来切换该变量

 const game = (() => {
    let currentPlayer = 1;

    const toggleCurrentPlayer = () => {
        if (currentPlayer == 1){
            currentPlayer = 2 ;
        }
        else {
            currentPlayer = 1;
        }
    };
    return {currentPlayer,toggleCurrentPlayer};
})();

如果我运行game.currentPlayer，它记录为1，然后运行game.toggleCurrentPlayer()，但它没有按预期更改currentPlayer，它仍然返回1。

但是，使用toggleCurrentPlayer()更改this函数似乎能够成功更改变量

function toggleCurrentPlayer(){
    if (this.currentPlayer == 1){      
        this.currentPlayer=2;
    }
    else if (this.currentPlayer == 2){
        this.currentPlayer=1;
    }
};

我知道关键字this的函数声明和函数表达式具有不同的含义，但是toggleCurrentPlayer()为什么只能与this关键字一起正常工作而不能设置变量自己吗？

解决方法

该函数执行时

return {currentPlayer,toggeleCurrentPlayer};

它将currentPlayer变量的初始值复制到对象中。

返回的对象包含变量的值，而不是对变量本身的引用。重新分配变量对对象没有影响。

您可以做的是在函数内部创建一个对象，然后对其进行修改。

const game = (() => {
  let obj = {
    currentPlayer: 1,toggleCurrentPlayer: () => {
      if (obj.currentPlayer == 1) {
        obj.currentPlayer = 2;
      } else {
        obj.currentPlayer = 1;
      }
    }
  };
  return obj;
})();

console.log(game.currentPlayer);
game.toggleCurrentPlayer();
console.log(game.currentPlayer);

另一种实现方法是使用获取变量的getter函数。

const game = (() => {
    let currentPlayer = 1;

    const toggleCurrentPlayer = () => {
        if (currentPlayer == 1){
            currentPlayer = 2 ;
        }
        else {
            currentPlayer = 1;
        }
    };
    const getCurrentPlayer = () => currentPlayer
    return {getCurrentPlayer,toggleCurrentPlayer};
})();

console.log(game.getCurrentPlayer());
game.toggleCurrentPlayer();
console.log(game.getCurrentPlayer());