JavaScript全局变量与函数内局部变量表现异常问题咨询

这是JavaScript新手非常容易踩的坑——你搞混了函数内部变量和外部作用域变量的生命周期规则，咱们一步步拆解清楚：

1. 为什么variableName的行为符合预期？ #

variableName是在myFunctionTests函数内部用let声明的：

function myFunctionTests(){
 let variableName = 10;
 // ... 后续逻辑
}

每次调用这个函数时，JavaScript都会为它创建一个全新的variableName变量，并且把值初始化为10。函数执行结束后，这个变量就会被销毁。所以不管你之前调用过多少次函数，每次触发时它都是从10开始计算，这就是勾选加1得11、取消勾选减1得9的原因，完全符合你的预期。

2. outsideVariable的意外行为核心原因 #

outsideVariable是在函数外部声明的：

let outsideVariable = 5;
function myFunctionTests(){
 // ... 函数逻辑
}

它属于外部作用域变量（浏览器环境下就是全局作用域），一旦被声明，它的生命周期会持续到页面刷新、或者你主动重新赋值、或者关闭页面。也就是说：

• 第一次运行代码后，它的初始值是5；
• 当你勾选复选框调用函数时，它被加1变成6，这个值会被保留下来，不会因为函数执行结束而消失；
• 当你取消勾选再次调用函数时，它会基于当前的6来减1，最终得到5——但你预期的是4，这是因为你误以为它会每次都回到初始的5重新计算，这是对变量作用域的错误认知。

3. 为什么改outsideVariable -=2能得到4？ #

这只是巧合：此时outsideVariable的当前值是6，6减2刚好等于你错误预期的4，但这并不是正确的逻辑，只是凑出了你想要的数字而已。

正确的测试方式 #

如果你想验证取消勾选的逻辑，应该在不重新运行整个代码的前提下操作：

1. 运行一次完整代码，初始化outsideVariable =5；
2. 勾选复选框，调用函数，此时outsideVariable变成6；
3. 直接取消勾选，再次调用函数，你会看到outsideVariable变成5——这才是符合JavaScript变量规则的正确结果。

如果你的需求确实是让outsideVariable每次都基于初始值5计算，那你应该把它移到函数内部声明，或者在函数开头重新初始化它，不过这样它就失去了“外部变量”的作用，具体要看你的实际场景。

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