所谓变量提升并不是代码真的被 "移动到了最前面"，而是仅在编译阶段被记录到执行上下文的环境结构中

showName()
console.log(myName)  // undefined

var myName = '极客时间'
function showName() {
  console.log('showName 函数被执行')  // showName 函数被执行
}

解析

因为 var name 的 "声明" 在编译阶段已经进入环境记录，并被初始化为 undefined。等到执行阶段遇到 console.log(myName) 时便可以找到这个变量，只是还没执行赋值语句

一段 Javascript 代码通常会经历三个阶段：源代码输入、编译阶段、执行阶段

JS 的执行流程图

1. 创建执行上下文

   不同环境下的 Javascript 代码会生成不同的执行上下文

   类型	触发时机	生命周期
   全局执行上下文	页面脚本开始执行	与页面生命周期一致（通常只有一份）
   函数执行上下文	每次函数调用	调用结束后可被销毁
   eval 执行上下文	执行 eval 字符串代码	取决于 eval 调用时机

2. 变量环境与词法环境

   执行上下文中又会创建 变量环境 与 词法环境，变量环境用于存放 var 与函数声明主要进入变量环境；词法环境用于存放 let/const 与块级作用域绑定

   可以简单的把变量环境理解为下面的这种对象结构

   VariableEnvironment = {
     myname: undefined,
     showName: function () {}
   }

3. 收集声明

   全局作用域中的变量声明和函数声明会被 Javascript 引擎所收集放入变量环境与词法环境

   • 对于 var 变量， Javascript 引擎将在变量环境中创建一个与其同名属性名并初始化为 undefined
   • 对于函数，Javascript 引擎会额外在堆内存中开辟空间，并将地址值赋予变量环境中的同名属性

4. 生成字节码

   生成字节码后，Javascript 引擎会执行代码，执行阶段会根据字节码指令依次执行

   

   编译阶段和环境构建示意

5. 执行阶段

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

贡献者: zhaojisen, ZhaoJiSen

上一页HTTP 请求流程与连接管理

下一页调用栈