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

Question

我有一个模块模式，其中一个变量将 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，它仍然returns 1.

不过，用this改toggleCurrentPlayer()函数，貌似可以改变量成功

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

我知道函数声明和函数表达式对关键字 this 有不同的含义，但为什么 toggleCurrentPlayer() 只能与 this 关键字一起使用而无法设置变量本身？

Answer 1

函数执行时

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

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

toggling variable inside Module Pattern using function declaration vs function expression

javascript

design-patterns

function-declaration

module-pattern

function-expression