JS全局变量在函数范围之外没有改变答案

【问题标题】：JS global variable not changing outside of function scopeJS全局变量在函数范围之外没有改变
【发布时间】：2021-07-08 04:02:21
【问题描述】：

我正在用 JS 制作井字游戏，我正在尝试在“游戏控制器”模块中实现一个函数来处理玩家的回合。我遇到的问题是全局属性 'currentPlayer' 没有在修改它的函数范围之外更改其值。

我尝试使用开发工具进行调试，我可以看到值发生变化，但仅在 'switchPlayerTurn' 函数内部。这里有什么建议吗？

const GameController = (() => {
    const activePlayers = [];
    let currentPlayer = ''; 
    
   const _switchPlayerTurn = () => {
        if(currentPlayer === '') {
            currentPlayer = activePlayers[0];
        } else if(currentPlayer === activePlayers[0]){
            currentPlayer = activePlayers[1];
        } else if(currentPlayer === activePlayers[1]){
            currentPlayer = activePlayers[0];
        }
    }

    const init = () => {
        return createPlayers()
        .then(_switchPlayerTurn());
    }

    return {
        init,
        activePlayers,
        currentPlayer,
    }

})();

【问题讨论】：

标签： javascript scope closures

【解决方案1】：

返回带有currentPlayer 的对象只会导致对象在返回对象时包含currentPlayer 的值。您需要一个函数，以便您可以按需检索内部标识符的当前值。

return {
    init,
    activePlayers,
    getCurrentPlayer: () => currentPlayer,
}

然后，无论您在哪里使用它，都使用.getCurrentPlayer() 而不是.currentPlayer

【讨论】：

就是这样！谢谢你。现在这是有道理的。我有一个后续问题：上面代码中提到的activePlayers 数组也在GameController 对象的范围之外使用，但我没有这个问题。那是因为它是不同类型的元素吗？
这可能是因为您在其他地方使用的activePlayers 没有得到重新分配，而是得到变异，所以代码中的任何内容都带有对原始数组的引用可以看到更新后的值。

【解决方案2】：

这不像@certainPerformance 的回答那样优雅，但为了完整起见……您始终可以在函数范围之外定义它，以便始终全局访问它

let currentPlayer = ''; 
const GameController = (() => {
    const activePlayers = []; 
    // ...

【讨论】：

这也可以，但我试图避免使用过多的全局代码。