变量提升与执行上下文
约 643 字大约 2 分钟
2026-03-02
所谓变量提升并不是代码真的被 "移动到了最前面",而是仅在编译阶段被记录到执行上下文的环境结构中
showName()
console.log(myName) // undefined
var myName = '极客时间'
function showName() {
console.log('showName 函数被执行') // showName 函数被执行
}解析
因为 var name 的 "声明" 在编译阶段已经进入环境记录,并被初始化为 undefined。等到执行阶段遇到 console.log(myName) 时便可以找到这个变量,只是还没执行赋值语句
一段 Javascript 代码通常会经历三个阶段:源代码输入、编译阶段、执行阶段

创建执行上下文
不同环境下的 Javascript 代码会生成不同的执行上下文
类型 触发时机 生命周期 全局执行上下文 页面脚本开始执行 与页面生命周期一致(通常只有一份) 函数执行上下文 每次函数调用 调用结束后可被销毁 eval执行上下文执行 eval字符串代码取决于 eval调用时机变量环境与词法环境
执行上下文中又会创建 变量环境 与 词法环境,变量环境用于存放
var与函数声明主要进入变量环境;词法环境用于存放let/const与块级作用域绑定可以简单的把变量环境理解为下面的这种对象结构
VariableEnvironment = { myname: undefined, showName: function () {} }收集声明
全局作用域中的变量声明和函数声明会被 Javascript 引擎所收集放入变量环境与词法环境
- 对于
var变量, Javascript 引擎将在变量环境中创建一个与其同名属性名并初始化为 undefined - 对于函数,Javascript 引擎会额外在堆内存中开辟空间,并将地址值赋予变量环境中的同名属性
- 对于
生成字节码
生成字节码后,Javascript 引擎会执行代码,执行阶段会根据字节码指令依次执行

编译阶段和环境构建示意 执行阶段
当到执行阶段时,Javascript 引擎便到变量环境中查找与之匹配的函数和变量,由于变量对象中存在函数以及变量的引用,所以可以直接找到变量或者直接执行函数
