当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript执行上下文与变量提升解析

JavaScript执行上下文与变量提升解析

2025-12-27 21:24:55 0浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JavaScript执行上下文解析及变量提升原理》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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

如何理解javascript执行上下文_变量提升的机制是什么

JavaScript 执行上下文和变量提升，本质上是同一个运行机制的两个表现侧面：引擎在执行代码前，会先做一次“预处理”，把声明类信息（var、function）提前收集并初始化，这个过程发生在执行上下文创建阶段。

执行上下文是什么

每次函数被调用，或脚本首次运行时，JS 引擎都会创建一个执行上下文（Execution Context），它是代码执行时的“环境容器”，包含三个核心部分：

变量对象（VO）：存放当前作用域中所有变量、函数声明；全局环境下叫全局对象（GO），函数内叫活动对象（AO）
作用域链（Scope Chain）：用于标识符查找，由当前上下文的变量对象 + 外层上下文的变量对象组成
this 值：取决于函数如何被调用，与上下文创建方式有关

注意：只有 var 和 function 声明会被纳入 VO 并参与“提升”，let、const 和 class 虽然也存在“声明提升”，但不初始化（处于暂时性死区 TDZ），访问会报错。

变量提升具体怎么发生

所谓“提升”，不是代码真的被移动到顶部，而是声明在编译阶段（进入执行上下文时）就被注册进变量对象，并赋予初始值：

var a = 10; → 提升为 var a;（初始化为 undefined），赋值语句仍留在原位置
function foo() { } → 整个函数定义被提升，包括名字和函数体，可立即调用
var bar = function() {}; → 只有 var bar; 被提升（bar 初始化为 undefined），等号右边的函数表达式不会提升

例如：

console.log(a); // undefined
console.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() {};