JavaScript变量遮蔽（Variable Shadowing）导致游戏功能失效问题咨询

核心问题本质 #

你遇到的问题是典型的局部变量遮蔽全局变量，和两个函数是否独立没有关系，以下针对你的三个疑问逐一解答： #

疑问1：两个函数相互独立，为什么在其中一个函数里重新声明let变量会导致整个逻辑失效？ #

你在again按钮的回调函数里写的let score = 20，本质是在该函数的局部作用域里，新声明了一个和全局变量同名的局部变量score，这行代码完全没有修改你最开始在全局作用域声明的score变量。
两个函数确实是完全独立的：

• check回调函数里读取、修改的score一直都是全局作用域的score
• 点击again按钮时，你只修改了again回调自己的局部score，全局的score还是上一轮游戏结束时的旧值（比如上一轮玩到score=3就结束了，全局score还是3，根本没有被重置为20）
  所以点击again之后再猜数字，check函数读取的还是没有被重置的全局旧score，逻辑自然就出错了。

疑问2：我的check函数为什么会读取play again函数里的let变量？它不应该只向上查找父级/全局作用域的变量吗？ #

你的作用域查找规则理解完全正确：check函数根本不可能读取到again函数里的局部变量。
你误以为check读取了again里的变量完全是错觉：本质是again函数根本没有修改全局的score，check一直读取的都是全局的旧score而已。 #

疑问3：为什么点击重新开始按钮后，整个逻辑只会读取新声明的变量，忽略之前的全局变量，最终导致最高分的if else判断逻辑失效？ #

这里你完全搞反了逻辑：

• 点击again时你声明的局部score只在again的回调函数内部有效，除了这个函数之外，其他代码根本读不到这个局部变量
• 逻辑失效的真正原因是你没有修改全局的score，全局score一直是上一轮结束的数值，所以猜对数字时比较score > highscore的判断自然不符合预期。

修复方案 #

把again回调函数里的let score = 20改成score = 20即可，去掉let之后就不会声明新的局部变量，而是直接修改全局的score变量，逻辑就会恢复正常。
修复后的again代码参考：

document.querySelector('.again').addEventListener('click',function(){
    // 去掉let，直接修改全局score变量
    score = 20;
    document.querySelector('.message').textContent = 'Start Guessin ....'
    document.querySelector('.guess').value = '';
    document.querySelector('.score').textContent = score;
    secretNumber = Math.trunc(Math.random()* 20)+ 1;
    // 补充优化：如果不想开局就展示正确答案，可把下方的secretNumber改成'?'
    document.querySelector('.number').textContent = '?'
})

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