JS开发井字棋时currentPlayer变量在函数作用域外未更新问题求助

问题原因 #

你遇到的问题是两个错误共同导致的：

• 基础类型值拷贝问题：currentPlayer是字符串类型（基础类型），IIFE返回对象时是把当时currentPlayer的值拷贝给返回对象的currentPlayer属性，后续模块内部修改currentPlayer变量，不会同步到已经返回的对象属性上。而activePlayers是引用类型的数组，所以内部修改外部能感知到，二者赋值逻辑不一样。
• init方法中then的用法错误：你直接执行了_switchPlayerTurn()，而不是把函数作为参数传给then，这会导致createPlayers异步请求还没完成、activePlayers还没填充数据的时候，就提前执行了玩家切换逻辑。

解决方案 #

1. 把返回对象的currentPlayer改为getter属性，每次读取时都获取模块内部的最新值，而不是固定的初始拷贝
2. 修正then的传参，去掉_switchPlayerTurn后面的括号，等createPlayers执行完成后再触发玩家切换

修改后的代码如下：

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 = () => {
        // 去掉括号，把函数本身传给then
        return createPlayers()
        .then(_switchPlayerTurn);
    }

    return {
        init,
        activePlayers,
        // 用getter，每次读取都拿最新的内部值
        get currentPlayer() {
            return currentPlayer;
        }
    }

})();

后续外部读取GameController.currentPlayer时，拿到的就是模块内部的最新值。

内容的提问来源于stack exchange，提问作者jansyb04