JavaScript 中的词法作用域与 let 变量遮蔽机制详解_网络技术

JavaScript 中的词法作用域与 let 变量遮蔽机制详解

发布时间 - 2026-02-02 00:00:00 点击率：次

本文解释为何在嵌套函数中重复声明 `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 代码。

# javascript # java # win # 作用域 # red # if # for # const # var # 变量提升 # 而非 # 这是 # 这一 # 一是 # 帮你 # 适用于 # 不受 # 报错 # 指的是 # 虽不

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何在 PHP 中基于 code 字段去重合并两个 stdC

下一篇：键盘按键高低不平_键盘按键平整度调整

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何在 PHP 中基于 code 字段去重合并两个 stdC

下一篇：键盘按键高低不平_键盘按键平整度调整