本文解释为何在嵌套函数中重复声明 `let x` 不会报错——因为这是合法的变量遮蔽（shadowing），而非重复声明；`let` 的“不可重复声明”限制仅适用于同一作用域内。
在 JavaScript 中，let（以及 const）具有块级作用域（block scope），其核心规则之一是：同一作用域内不允许重复声明同名变量。但关键在于——“同一作用域”指的是完全相同的词法作用域层级，而非“名称相同”或“嵌套关系中看似冲突”。
回到你的示例代码：
function demoFunction() {
let x = 10; // ← 外层函数作用域中的 x
function demo() {
let y = 20;
let x = 5; // ← 内层函数作用域中的 x —— 全新变量，非重声明！
console.log(x); // 输出 5
console.log(y); // 输出 20
}
console.log(x); // 输出 10
demo();
}
demoFunction(); // 输出：10 → 5 → 20这里并未违反 let 规则，因为：
- 外层 let x = 10 属于 demoFunction 函数作用域；
- 内层 let x = 5 属于 demo 函数作用域；
- 两个 x 位于不同、互不重叠的词法作用域中，因此它们是两个独立变量。
这种行为称为 变量遮蔽（variable shadowing）：内层作用域中声明的同名变量会“遮蔽”外层同名变量，在该内层作用域内对 x 的所有引用均指向内层变量，而外层 x 依然存在且不受影响。
立即学习“Java免费学习笔记（深入）”；
⚠️ 对比 var 的差异：
var 仅支持函数作用域，且存在变量提升（hoisting）和重复声明容忍（虽不推荐）。例如：
function example() {
var x = 10;
if (true) {
var x = 20; // ✅ 合法（但会覆盖外层 x，无块级隔离）
}
console.log(x); // 输出 20
}而 let 在块级（如 if、for、函数体）中严格隔离，且禁止同一块内重复声明：
function badExample() {
let x = 10;
let x = 20; // ❌ SyntaxError: Identifier 'x' has already been declared
}✅ 正确理解作用域链：
当访问一个变量时，JavaScript 引擎按从内到外的嵌套顺序查找最近的声明（即作用域链）：
let x = 'global';
function outer() {
let x = 'outer';
function inner() {
let x = 'inner';
console.log(x); // 'inner' ← 最近声明
}
inner();
}
outer();总结：
- ✅ 允许在不同作用域中用 let 声明同名变量（即遮蔽）；
- ❌ 禁止在同一作用域（如同一函数体、同一 {} 块）中重复声明 let 变量；
- ? 作用域由词法结构（函数、块）静态决定，与执行时机无关；
- ? 遮蔽是显式设计特性，常用于避免意外修改外层变量，提升代码可维护性。
掌握这一机制，能帮你写出更安全、意图更清晰的现代 JavaScript 代码。
