在函数中传递和操作全局变量

Question

我只是通过一些教程来学习 js，但在理解 js 如何跨函数传递变量时遇到了问题。 一个简单的程序，可将点击时的电镀工分数增加到最大值并重置分数。

在事件侦听器中为每个播放器按钮创建一个函数相对容易，但我意识到我正在重用代码，所以想创建一个函数来为这两个按钮完成工作。 我的问题是，当我更新函数内的变量时，它们与全局变量不相关，也不会更新。

代码在这里：

// global variables
var inputScore = document.querySelector("#maxScore")
var p1btn = document.querySelector("#p1Input");
var p2btn = document.querySelector("#p2Input");
var reset = document.querySelector("#reset");

var p1 = document.querySelector("#p1");
var p1Score = 0;
var p2 = document.querySelector("#p2");
var p2Score = 0;

var maxScore = 5
var gameOver =false;

// event listeners
p1btn.addEventListener("click",function(){
  scoreUpdate(p1,p1Score,maxScore,gameOver);
});

p2btn.addEventListener("click",function(){
  scoreUpdate(p2,p2Score,maxScore,gameOver);
});
// reset Button
reset.addEventListener("click",function(){
  // make sure you dont hit game over twice
  if(gameOver){
    gameOver=!gameOver
  }
  p1Score=0
  p1.textContent = p1Score;
  p1.classList.remove("green")
  p2Score=0
  p2.textContent = p2Score;
  p2.classList.remove("green")
});

//updateScore function to be called on either player buttons
function scoreUpdate(playerDisplay, playerScore,maxScore,gameOver){
  console.log("hit")
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)
  if(playerScore < maxScore & !gameOver){
      playerScore++;
      playerDisplay.textContent = playerScore;
      if(playerScore ==maxScore){
        gameOver=!gameOver
        playerDisplay.classList.add("green")
      }
    }
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)

}

提前致谢！

Answer 1

您需要了解变量作用域。
当将gameOver传递给scoreUpdate函数时，它成为在该函数体内定义的局部变量； 它与全局gameOver变量不同。

如果要修改全局变量，请不要将其作为参数传递。

网上有很多关于这个的文章可以了解更多： https : //www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Answer 2

您可以使用return覆盖旧变量，这将使用新数据覆盖旧变量。

p1Score = scoreUpdate(p1,p1Score,maxScore,gameOver);
p2Score = scoreUpdate(p2,p2Score,maxScore,gameOver);

function scoreUpdate(playerDisplay, playerScore,maxScore,gameOver){
  console.log("hit")
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)
  if(playerScore < maxScore & !gameOver){
      playerScore++;
      playerDisplay.textContent = playerScore;
      if(playerScore ==maxScore){
        gameOver=!gameOver
        playerDisplay.classList.add("green")
      }
    }
  console.log("PlayerDisplay",playerDisplay,"playerScore",playerScore,"maxScore",maxScore,"gameOver",gameOver)

return playerScore;
}