使用全局变量时函数的行为有所不同

Question

let outsideVariable = 5;

  function myFunctionTests(){
    let checkBox = document.getElementById("checkTests");
    let variableName = 10;
    if (checkBox.checked == true){
        variableName += 1;
        outsideVariable += 1;
        console.log('variableName is: ',variableName);
        console.log('outsideVariable is: ',outsideVariable);
    } else {
        variableName -= 1;
        outsideVariable -= 1;
        console.log('variableName is: ',variableName);
        console.log('outsideVariable is: ',outsideVariable);
    }
  }

当我运行此代码并勾选复选框时，两个变量（“variableName”和“outsideVariable”）都会增加 1（输出为 11 和 6）。到目前为止，一切都很好。

现在，当我取消选中该复选框时，“variableName”会下降 1（基于初始值 10，因此按预期变为 9），但“outsideVariable”会返回到 5，而不是 4。

唯一的方法要使“outsideVariable”变为4，只需更改

outsideVariable -= 1；

到

外部变量 -= 2;

发生这种情况有什么特殊原因吗？ 我正在学习 JavaScript，所以请考虑到这一点。

Answer 1

你想要当复选框取消选中时，variableName = 10 和 OutsideVariable = 5，但它们等于 9 和 4，对吧？对于这个问题，你应该在全局范围之外定义变量名！