JavaScript(JS)中var和let的区别及推荐

### JavaScript 中 `var` 和 `let` 的区别 在 JavaScript 中，`var` 和 `let` 是用于声明变量的关键字，但两者之间存在显著差异。 #### 变量作用域 当使用 `var` 声明变量时，该变量具有函数级作用域或全局作用域。这意味着如果在一个函数内部定义了一个 `var` 变量，则它在整个函数范围内都可访问；而在全局上下文中定义的话则成为全局对象的一部分[^1]。 相比之下，`let` 提供了更严格的块级作用域特性。只要是在大括号 `{}` 内部通过 `let` 定义的任何东西都会被限制在这个特定代码块内有效，并且不会泄漏到外部环境中去[^3]。 ```javascript function example() { var functionScopedVar = "I'm scoped to the entire function!"; if (true) { let blockScopedLet = "I only live inside this block."; console.log(blockScopedLet); // 输出："I only live inside this block." } console.log(functionScopedVar); // 正常输出 //console.log(blockScopedLet); // ReferenceError: blockScopedLet is not defined } example(); ``` #### 可重复声明性 另一个重要方面在于能否在同一作用域下多次声明相同名称的变量： 对于 `var` 来说，在同一个作用域里可以重新声明同名变量而不会报错，这可能会导致意外覆盖已存在的值并引发难以调试的问题[^2]。 然而，利用 `let` 则不允许这样做——尝试再次声明已经存在于当前作用域中的名字将会抛出错误，从而减少了潜在的风险和混乱情况的发生。 ```javascript // 使用 var 关键字 var x = 1; var x = 2; // 这里的第二次赋值会简单替换第一次的值 console.log(x); // 结果为：2 // 使用 let 关键词 let y = 1; // let y = 2; // SyntaxError: Identifier 'y' has already been declared ``` #### 初始化前读取行为（暂时死区） 还有一个值得注意的地方就是所谓的“暂时死区”。由于 TDZ（Temporal Dead Zone），即时间上的死亡区域概念的存在，在 ES6 引入的新语法形式如 `let` 下面创建出来的绑定直到执行流到达它们各自的声明语句之前都是不可访问的状态。而对于旧版本遗留下来的 `var` ，即使还没有正式初始化也能够提前引用其未赋初值的形式[^4]。 ```javascript console.log(a); // undefined （因为 var 预解析的原因） try { console.log(b); } catch(e){ console.error('ReferenceError caught'); } var a = 10; let b = 20; // 上述例子中，尽管两个变量都在同一位置进行了实际分配操作， // 不过只有 var 类型允许我们在声明之前就对其进行访问。 ``` 综上所述，虽然 `var` 和 `let` 都是用来声明变量的方式之一，但在现代编程实践中推荐优先考虑使用后者来获得更好的控制力以及减少不必要的副作用风险。