你有没有遇到过这样的情况？代码明明没问题，运行结果却出乎意料？或者编译报错，又不知道在哪儿搞错了？ 咱就是说JS 的执行机制可不是简单的“边读边执行”，它里面藏着好多坑。别kan它们kan起来复杂，其实只要理解几个核心概念，就Neng轻松搞定。今天咱就来好好扒一扒 JS 执行的底层逻辑，让你再也不怕代码跑偏啦！

执行上下文就像代码运行的“专属大本营”，每当 JS 代码要执行的时候，V8 引擎会先创建一个执行上下文对象。这个对象里面装着代码运行所需的所有“物料”，包括变量、函数、作用域等等。你Ke以把全局上下文和函数上下文想象成两个不同的仓库，每个仓库dou有自己的规则和区域。

在执行上下文中，变量会被分为两种环境：词法环境和变量环境。词法环境是基于代码结构确定的，“在哪里声明”就决定了它的作用域；而变量环境则是运行时确定的，“被调用时”才赋予实际值。

JS 并非 “边读边执行”，而是遵循「先编译，后执行」的原则。编译阶段会完成这四件事：

创建全局执行上下文

找到 var 声明的变量并存入变量环境

找到函数声明并存入变量环境

将函数体赋值给对应的位置

然后才是运行时阶段，按照编译阶段的结果来真的执行。不同于全局上下文有编译和运行两个阶段，函数上下文只有运行阶段。

你有没有发现过这样奇怪的情况：在函数定义之前使用某个变量时并没有报错？ 这就是因为 JavaScript 有“变量提升”和“函数提升”这两个特性。它们其实是 V8 引擎在编译时就提前处理的结果。

`let` 和 `const` 作为 ES6 的新特性，彻底打破了 `var` 的随性。“var” Ke以随意在任何地方声明 ，而 `let` 和 `const` 则严格遵守块级作用域的概念。

let a = ; // let a = ; // 报错 Identifier 'a' has already been declaredfunction a {} //同样报错 let声明的a不Neng重复定义var a = ; //Ke以// var a = ; //OK

`let` 和 `const` 在声明之前访问会直接报错, 这个区间就是「暂时性死区」，你在使用一个Yi声明但尚未赋值的变量时会触发 TDZ 。相当于这个变量还没完全解锁, 所以不Neng被访问。

function fn {  // 函数提升: fn 被提升到其作用域中, 所以Ke以在fn外部使用fn  // 形参a入变量环境:{ a: undefined }；  // 实参赋值: a = ;  // 找到function a覆盖a:{ a: 函数体 }；  // 解析：参数是按照定义的顺序逐个赋值的,所以fn中a的值是3,fn中a的值是null;   console.log; // 输出：参数值    var a = ; // 执行阶段: a赋值为2    function a {}    var b = a;    console.log; // 输出：

var a = ;  if  {    var a = ;   console.log;     } console.log;   // 输出 "undefined" 因为if块内的 var 是外层的作用域中的 var ，所以这里输出的是外层 var 中的值;   let b = ;   if  {     let b = ;     console.log;     } console.log;   //输出 "undefined" 因为 if 中 let 是新的块级作用域 , 不影响外层 let;

var x; console.log; // undefined, x 未定义； x Yi声明但未初始化； var x = ""; console.log; // "" x Yi初始化为 ""； function test { var x; let x; } test; console.log;