JavaScript执行上下文与变量提升是同一机制的两面:引擎在创建执行上下文时预处理声明(var/function),将其注入变量对象(VO)并初始化,而let/const仅声明不初始化(TDZ)。

JavaScript 执行上下文和变量提升,本质上是同一个运行机制的两个表现侧面:引擎在执行代码前,会先做一次“预处理”,把声明类信息(var、function)提前收集并初始化,这个过程发生在执行上下文创建阶段。
执行上下文是什么
每次函数被调用,或脚本首次运行时,JS 引擎都会创建一个执行上下文(Execution Context),它是代码执行时的“环境容器”,包含三个核心部分:
- 变量对象(VO):存放当前作用域中所有变量、函数声明;全局环境下叫全局对象(GO),函数内叫活动对象(AO)
- 作用域链(Scope Chain):用于标识符查找,由当前上下文的变量对象 + 外层上下文的变量对象组成
- this 值:取决于函数如何被调用,与上下文创建方式有关
注意:只有 var 和 function 声明会被纳入 VO 并参与“提升”,let、const 和 class 虽然也存在“声明提升”,但不初始化(处于暂时性死区 TDZ),访问会报错。
变量提升具体怎么发生
所谓“提升”,不是代码真的被移动到顶部,而是声明在编译阶段(进入执行上下文时)就被注册进变量对象,并赋予初始值:
立即学习“Java免费学习笔记(深入)”;
-
var a = 10;→ 提升为var a;(初始化为undefined),赋值语句仍留在原位置 -
function foo() { }→ 整个函数定义被提升,包括名字和函数体,可立即调用 -
var bar = function() {};→ 只有var bar;被提升(bar初始化为undefined),等号右边的函数表达式不会提升
例如:
console.log(a); // undefinedconsole.log(b); // ReferenceError(b 是 let 声明)
foo(); // 正常执行
bar(); // TypeError: bar is not a function
var a = 1;
let b = 2;
function foo() { return 'ok'; }
var bar = function() {};
为什么函数声明比 var 更“靠前”
在同一个作用域中,如果函数名和变量名冲突,函数声明优先级更高,且会在变量声明之前被处理。引擎在填充 VO 时,顺序是:
- 先处理所有
function声明(覆盖同名变量) - 再处理
var声明(不覆盖已存在的函数名)
所以:
console.log(typeof foo); // "function"var foo = 1;
function foo() {}
这段代码中,foo 最终是函数;但如果写成 var foo = 1; function foo() {},结果一样——因为函数声明已在预处理阶段写入 VO,var foo = 1 的赋值只是后续执行阶段的操作。
实际开发中要注意什么
变量提升容易引发隐式行为和 bug,建议养成明确、可预测的书写习惯:
- 始终在作用域顶部声明所有
var变量(即使不立即赋值) - 优先使用
const/let替代var,避免变量提升带来的困惑 - 函数尽量统一用函数声明(
function name() {})或箭头函数(const fn = () => {}),少用函数表达式赋值给var - 不要依赖提升来调用尚未“出现”的函数或变量,代码应自上而下可读
理解执行上下文的生命周期(创建 → 执行 → 销毁)和其中的变量对象行为,就能自然看懂为什么某些变量能访问、某些报错、某些值是 undefined——它不是语法糖,而是 JS 引擎实实在在的执行规则。











