javascript在调用函数之前分配变量

Question

编辑添加：*********** @melomene 不喜欢我的 call roll 和 rollP 数组。但是，它们被声明为数组。我在下面添加了完整的 javascript 文件。

---

我有 2 个小数组：roll[] 和 rollP[]。他们每个人只有 2 个项目。当函数'checkDouble6()'运行时，roll的内容被保存到rollP中，像这样。

rollP = roll;

这是代码中唯一将roll的值分配给rollP的地方。

不知何故，这有时会在调用 checkDouble6() 函数之前发生，即使此语句在 checkDouble6() 函数内。

console.logs 试图弄清楚这一点，我已经疯了。随便吧..

以下是玩家点击时发生的情况（这会导致虚拟骰子滚动）、checkDouble6() 函数和“持有”函数的代码块。等待是指玩家决定保留当前分数并允许下一位玩家轮到他们。

由于某种原因，在玩家第一次切换时不会发生抢先变量分配。我认为这是因为 switchPlayer() 函数将 rollP 重新分配给 [0,0]。但是之后，每次玩家滚动时，变量数组rollP在调用checkDouble6()函数之前获取roll的值。

document.querySelector('.btn-roll').addEventListener('click', function(){

    if (isGamePlaying){
        //1.Random number is generated
        roll[0] = Math.floor(Math.random()*6) + 1;
        roll[1] = Math.floor(Math.random()*6) + 1;

        //2.Display the result
        document.querySelectorAll('.dice').forEach(diceClass=>diceClass.style.display = 'block');
        document.getElementById('dice1').src = 'dice-'+roll[0]+'.png';
        document.getElementById('dice2').src = 'dice-'+roll[1]+'.png';

        console.log('roll before checkDouble6: '+roll);
        console.log('rollP before checkDouble6: '+rollP);
        checkDouble6();
        console.log('roll after checkDouble6: '+roll);
        console.log('rollP after checkDouble6: '+rollP);

        //3.Update the round score IF the rolled number is not a 1
        if( roll[0]!== 1 && roll[1]!==1){
            //Add score
            roundScore += roll[0]+roll[1];
            document.getElementById('current-'+activePlayer).textContent = roundScore;

        }else{
            //Next player's turn.
            roundScore = 0;
            switchPlayer();
        }  
    }
});

function checkDouble6(){
    if (roll[0]===6 &&(roll[1]===6 || rollP[0]===6 || rollP[1]===6)){
        //lose whole global score. Next player's turn.
        scores[activePlayer]=0;
        console.log('roll during checkDouble6: '+roll);
        console.log('roll during checkDouble6: '+rollP);
        switchPlayer();
    } else if (roll[1]===6 &&(rollP[0]===6 || rollP[1]===6)){
        //lose whole global score. Next player's turn.
        scores[activePlayer]=0;
        console.log('roll: '+roll);
        console.log('rollP: '+rollP);
        switchPlayer();
    } else{
        //everything is fine
    }
    rollP = roll;
    console.log('roll at end of checkDouble6 function: '+roll);
    console.log('rollP at end of checkDouble6 function: '+rollP);
};

有这么多的控​​制台日志，因为我试图弄清楚这是怎么发生的。下面是“保持”功能。同样，这不会在玩家回合切换后立即发生，可能是因为将 rollp 设置为 [0,0]。

document.querySelector('.btn-hold').addEventListener('click', function(){
    if (isGamePlaying){
        //Add current score to global score
        scores[activePlayer] += roundScore;

        //Update UI
        document.getElementById('score-'+activePlayer).textContent = scores[activePlayer];

        //Check if player won the game
        if (scores[activePlayer]>=100){
            //they won
            document.getElementById('name-'+activePlayer).textContent = 'WINNER!';
            document.querySelector('.dice').style.display = 'none';
            document.querySelector('.player-'+activePlayer+'-panel').classList.remove('active');
            document.querySelector('.player-'+activePlayer+'-panel').classList.add('winner');
            isGamePlaying = false;
        }else{
            //they didn't win. Next player's turn.
            switchPlayer();
        }
    }

});

这是整个shebang：

var scores, roundScore, activePlayer, isGamePlaying;
var roll = new Array(2);
var rollP = new Array(2);

initializeGame();

//document.querySelector('#current-0').textContent = dice;
//document.querySelector('#current-'+activePlayer).innerHTML = '<em>'+dice+'</em>';

document.querySelector('.btn-roll').addEventListener('click', function(){
    // This would be an anonymous function

    if (isGamePlaying){
        //1.Random number is generated
        roll[0] = Math.floor(Math.random()*6) + 1;
        roll[1] = Math.floor(Math.random()*6) + 1;

        //2.Display the result
        document.querySelectorAll('.dice').forEach(diceClass=>diceClass.style.display = 'block');
        document.getElementById('dice1').src = 'dice-'+roll[0]+'.png';
        document.getElementById('dice2').src = 'dice-'+roll[1]+'.png';

        console.log('roll before checkDouble6: '+roll);
        console.log('rollP before checkDouble6: '+rollP);
        checkDouble6();
        console.log('roll after checkDouble6: '+roll);
        console.log('rollP after checkDouble6: '+rollP);

        //3.Update the round score IF the rolled number is not a 1
        if( roll[0]!== 1 && roll[1]!==1){
            //Add score
            roundScore += roll[0]+roll[1];
            document.getElementById('current-'+activePlayer).textContent = roundScore;

        }else{
            //Next player's turn.
            roundScore = 0;
            switchPlayer();
        }  
    }
});

document.querySelector('.btn-hold').addEventListener('click', function(){
    if (isGamePlaying){
        //Add current score to global score
        scores[activePlayer] += roundScore;

        //Update UI
        document.getElementById('score-'+activePlayer).textContent = scores[activePlayer];

        //Check if player won the game
        if (scores[activePlayer]>=100){
            //they won
            document.getElementById('name-'+activePlayer).textContent = 'WINNER!';
            document.querySelector('.dice').style.display = 'none';
            document.querySelector('.player-'+activePlayer+'-panel').classList.remove('active');
            document.querySelector('.player-'+activePlayer+'-panel').classList.add('winner');
            isGamePlaying = false;
        }else{
            //they didn't win. Next player's turn.
            switchPlayer();
        }
    }

});

function switchPlayer(){
    // Set round scores to 0
    roundScore = 0;
    roll = [0,0];
    rollP = [0,0];
    document.getElementById('current-0').textContent = 0;
    document.getElementById('current-1').textContent = 0;

    // Toggle the visuals 
    document.querySelector('.player-0-panel').classList.toggle('active');
    document.querySelector('.player-1-panel').classList.toggle('active');

    //change active player from one to the other
    console.log('Switch from player-'+activePlayer);
    activePlayer === 1 ? activePlayer = 0 : activePlayer = 1;
    console.log('to player-'+activePlayer);
};

document.querySelector('.btn-new').addEventListener('click', initializeGame);

function initializeGame(){
    roll = [0,0];
    rollP = [0,0];
    roundScore = 0;
    scores = [0,0];
    activePlayer = 0;  

    document.querySelectorAll('.dice').forEach(diceClass => diceClass.style.display = 'none');
    document.getElementById('score-0').textContent = '0';
    document.getElementById('score-1').textContent = '0';
    document.getElementById('current-0').textContent = '0';
    document.getElementById('current-1').textContent = '0';
    document.getElementById('name-0').textContent = 'Player 1';
    document.getElementById('name-1').textContent = 'Player 2';
    document.querySelector('.player-0-panel').classList.remove('winner');
    document.querySelector('.player-1-panel').classList.remove('winner');
    document.querySelector('.player-0-panel').classList.remove('active');
    document.querySelector('.player-1-panel').classList.remove('active');
    document.querySelector('.player-0-panel').classList.add('active');

    isGamePlaying = true;

};

function checkDouble6(){
    if (roll[0]===6 &&(roll[1]===6 || rollP[0]===6 || rollP[1]===6)){
        //lose whole global score. Next player's turn.
        scores[activePlayer]=0;
        console.log('roll during checkDouble6: '+roll);
        console.log('roll during checkDouble6: '+rollP);
        switchPlayer();
    } else if (roll[1]===6 &&(rollP[0]===6 || rollP[1]===6)){
        //lose whole global score. Next player's turn.
        scores[activePlayer]=0;
        console.log('roll: '+roll);
        console.log('rollP: '+rollP);
        switchPlayer();
    } else{
        //everything is fine
    }
    rollP = roll;
    console.log('roll at end of checkDouble6 function: '+roll);
    console.log('rollP at end of checkDouble6 function: '+rollP);
};

Answer 1

当您执行roll = rollP 时，您将引用从rollP 复制到roll，这意味着roll 和rollP 将指向相同的内存位置。

例如如果你在滚动中推动某物，它在 rollP 中将完全相同，反之亦然。

如果我没看错，你只要roll[0] = rollP[0]; roll[1] = rollP[1];