🌐JavaScript 是一门看似简单却充满细节的语言，其核心机制之一便是 作用域（Scope） 与 变量提升（Hoisting） 。理解这些概念不仅有助于写出更健壮的代码，更是深入掌握 JS 执行机制、闭包、执行上下文等高级特性的基础。本文将系统性地梳理 JavaScript 中的作用域类型、变量提升行为、函数声明与表达式的差异、执行上下文结构、作用域链构成，并结合 ES5 与 ES6 的演进，详细剖析 var、let、const 的不同表现，辅以多个典型示例，帮助你彻底掌握这一关键知识体系。
🔍 一、什么是作用域？
“作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。” ——《你不知道的JS》
简而言之，作用域决定了变量和函数的可见性与生命周期。它控制着：
- 哪些代码可以访问某个变量
- 变量何时被创建、何时被销毁
📌 1.1 JavaScript 中的作用域类型
✅ 全局作用域（Global Scope）
-
在任何地方都能访问
-
生命周期 = 页面/程序运行周期
-
示例：
var globalVar = "我是全局变量";
✅ 函数作用域（Function Scope）【ES5】
-
变量仅在函数内部可访问
-
生命周期 = 函数执行周期
-
使用
var声明的变量属于函数作用域 -
示例（来自
2.js）：function myFunction() { var localVar = "我是局部变量"; console.log(globalVar); // ✅ 可访问全局变量 console.log(localVar); // ✅ } myFunction(); console.log(globalVar); // ✅ "我是全局变量" console.log(localVar); // ❌ ReferenceError: localVar is not defined
✅ 块级作用域（Block Scope）【ES6 引入】
-
由
{}包裹的代码块形成独立作用域 -
仅
let和const支持块级作用域 -
var不支持块级作用域（即使写在 if/for 中也会提升到函数或全局） -
示例（来自
3.jsvs4.js对比）：使用
var（无块级作用域） （3.js）：let name = "小静同学"; function showName() { console.log(name); // undefined ← 为什么？ if (true) { var name = "大厂的苗子"; // var 会提升到函数顶部！ } console.log(name); // "大厂的苗子" } showName();实际等效于：
let name = "小静同学"; function showName() { var name; // 提升 → 初始值 undefined console.log(name); // undefined if (true) { name = "大厂的苗子"; } console.log(name); // "大厂的苗子" }使用
let（有块级作用域） （4.js）：let name = "小静同学"; function showName() { console.log(name); // "小静同学" ← 正确！ if (false) { let name = "大厂的苗子"; // 块级作用域，且 if(false) 不执行 } } showName(); // 输出 "小静同学"因为
let name在 if 块中声明，但该块未执行，且let不会提升到函数顶部，所以console.log(name)访问的是全局的name。
⬆️ 二、变量提升（Hoisting）详解
变量提升是 JavaScript 编译阶段的一个特性：变量和函数声明会被“移动”到其所在作用域的顶部。
⚠️ 注意：只有声明被提升，赋值不会被提升！
🧠 2.1 JS 执行的两个阶段（V8 引擎视角）
-
编译阶段（Compilation Phase）
- 词法分析 → 语法分析 → 生成 AST → 生成可执行代码
- 处理所有变量和函数声明，放入对应环境（变量环境 / 词法环境）
-
执行阶段（Execution Phase）
- 按顺序执行代码
- 执行赋值、函数调用等操作
📦 2.2 var 的提升行为
console.log(myname); // undefined
var myname = "小王同学";
编译后等效于：
var myname; // 声明提升，初始值为 undefined
console.log(myname); // undefined
myname = "小王同学"; // 赋值在原位置执行
这就是为什么输出
undefined而不是报错。
再看一个经典错误（来自 1.js）：
showName(); // ❌ ReferenceError: showName is not defined
console.log(myname); // （不会执行到这行）
var myname = "小王同学";
function sayname() { // 注意：函数名是 sayname，不是 showName！
console.log('函数showName 执行了');
}
showName从未声明 → 直接报错- 即使有
var myname提升，也不会执行到第二行
🚫 2.3 let / const 的“提升”与暂存性死区（TDZ）
ES6 中 let 和 const 也会被提升，但它们被放入 词法环境（Lexical Environment） ，而非 var 所在的 变量环境（Variable Environment） 。
更重要的是：在声明前访问 let/const 变量会触发 TDZ（Temporal Dead Zone）错误。
console.log(x); // ❌ ReferenceError: Cannot access 'x' before initialization
let x = 5;
💡 为什么这样设计？
- 避免
var提升导致的“意外 undefined”问题- 强制开发者先声明再使用，提升代码健壮性
- 向下兼容：
var保留旧行为，let/const提供新规范 → “一国两制”
📈 三、函数提升机制
✅ 3.1 函数声明（Function Declaration）—— 完全提升
sayHello(); // ✅ "Hello!"
function sayHello() {
console.log("Hello!");
}
编译后等效于：
function sayHello() { /* 整个函数体被提升 */ }
sayHello(); // 正常调用
函数声明的提升优先级 高于
var变量声明。
⚠️ 3.2 函数表达式（Function Expression）—— 仅变量名提升
sayHi(); // ❌ TypeError: sayHi is not a function
var sayHi = function() {
console.log("Hi!");
};
编译后等效于：
var sayHi; // 提升，值为 undefined
sayHi(); // undefined() → TypeError
sayHi = function() { ... };
❗ 函数表达式 不支持块级作用域（即使写在 if 块中，
var仍会提升到函数顶部）
🔗 四、作用域链（Scope Chain）与闭包（Closure）
🧩 4.1 作用域 vs 作用域链
| 特性 | 作用域（Scope） | 作用域链（Scope Chain） |
|---|---|---|
| 定义 | 变量/函数的可访问范围 | 作用域的层级引用链 |
| 创建时机 | 代码编写时（词法作用域） | 函数定义时确定 |
| 查找方向 | 单一作用域内 | 从内向外：当前 → 父级 → 全局 |
| 核心功能 | 控制访问权限 | 决定变量查找路径 |
| 是否可变 | 静态（不可动态修改） | 结构固定 |
JavaScript 采用 词法作用域（Lexical Scope） ，即变量引用在代码书写时就已确定，而非运行时。
示例：
var x = 10;
function foo() {
console.log(x); // 10
}
function bar() {
var x = 20;
foo(); // 输出 10，不是 20！
}
bar();
foo定义时，x指向全局 → 无论在哪里调用，都查全局x
🔒 4.2 闭包的本质
闭包 = 函数 + 其词法作用域的引用
function createCounter() {
var count = 0;
return function increment() {
count++;
return count;
};
}
var counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
increment函数即使在createCounter执行完毕后，仍能访问其内部的count- 这是因为
increment的作用域链包含了createCounter的执行上下文
💡 闭包是 JS 最强大的特性之一，但也可能导致内存泄漏（若不必要地长期持有外部变量）
🧱 五、执行上下文（Execution Context）
每次 JS 代码执行，都会进入一个 执行上下文。
📦 5.1 执行上下文的组成
-
变量对象（VO） / 词法环境（Lexical Environment）
- 存储变量、函数声明
var→ 变量环境；let/const→ 词法环境
-
作用域链（Scope Chain）
- 当前作用域 + 所有父级作用域的引用
-
this 绑定
- 确定函数调用时的上下文对象
📚 5.2 执行上下文栈（Call Stack）
- 全局代码执行 → 创建 全局执行上下文，压入栈底
- 调用函数 → 创建 函数执行上下文，压入栈顶
- 函数返回 → 弹出栈顶上下文
- 程序结束 → 弹出全局上下文
调用栈以 函数为单位 入栈/出栈，函数执行完后，其上下文被销毁，变量回收（除非被闭包引用）
🧪 六、经典案例深度分析
🧩 案例一：函数名拼写错误（1.js）
showName(); // ❌ ReferenceError
console.log(myname);
var myname = "小王同学";
function sayname() { ... } // 注意：是 sayname，不是 showName
showName未声明 → 直接报错- 即使
myname被提升，也不会执行到第二行
🧩 案例二：函数声明 vs 变量声明优先级
var foo = 'bar';
function foo() {
console.log('函数foo');
}
console.log(typeof foo); // "string"
解析：
-
编译阶段：
- 函数声明
foo被提升 →foo = function() { ... } - 变量声明
var foo也被提升，但函数优先级更高，所以不覆盖
- 函数声明
-
执行阶段：
foo = 'bar'赋值 → 覆盖函数
-
最终
foo是字符串'bar'
✅ 函数声明提升 > 变量声明提升，但 赋值操作会覆盖
🛠️ 七、现代 JavaScript 最佳实践
✅ 7.1 使用 const 和 let 替代 var
- 避免变量提升陷阱
- 利用块级作用域防止变量污染
const优先（不可变引用），需要重赋值时用let
✅ 7.2 变量声明靠近使用位置
- 提高可读性
- 减少作用域跨度
✅ 7.3 理解闭包的内存影响
- 避免不必要的闭包持有大对象
- 手动解除引用（设为 null）可帮助 GC
✅ 7.4 明确函数创建方式
- 需要提前调用 → 用函数声明
- 需要条件创建或作为值传递 → 用函数表达式
🧠 八、深入思考：为何变量提升是“缺陷”却保留？
- 历史原因：早期 JS 设计仓促，提升机制简化了解析器实现
- 兼容性：大量旧代码依赖
var提升行为，不能直接移除 - 渐进改进：ES6 引入
let/const+ TDZ，在保留兼容的同时提供更安全的替代方案
这正是 JavaScript “一国两制”哲学的体现：旧机制保留，新机制更优
🏁 九、总结
JavaScript 的作用域与提升机制是理解其运行逻辑的基石。通过本文，我们系统掌握了：
- 🌍 三种作用域：全局、函数、块级（ES6）
- ⬆️ 变量提升本质：编译阶段声明处理，
var提升赋初值undefined，let/const有 TDZ - 📞 函数提升差异：声明完全提升，表达式仅变量名提升
- 🔗 作用域链：静态词法作用域，从内向外查找
- 🔒 闭包：函数记住并访问其词法作用域的能力
- 🧱 执行上下文：包含变量环境、作用域链、this，由调用栈管理
- 🛠️ 最佳实践：优先
const/let，避免var，合理使用闭包
掌握这些知识，不仅能解释“诡异”的 JS 行为，更能写出清晰、安全、高效的代码。正如 Douglas Crockford 所言：“JavaScript 的精华在于其函数和作用域机制。” 深入理解它们，你便真正踏入了 JS 的核心殿堂。
📚 参考资料
- 《JavaScript 语言精粹》 – Douglas Crockford
- 《你不知道的 JavaScript（上卷 & 中卷）》 – Kyle Simpson
