说实话，JavaScript 的执行机制一直是前端开发中的核心内容，你懂的，无论是日常开发还是面试，dou绕不开它。

哈哈，hen多初学者会觉得 JS 是“边编译边执行”的解释型语言，但实际上，JS 的执行遵循「编译阶段 → 执行阶段」的固定流程。

当 JavaScript 引擎执行代码时并非直接逐行运行，而是先创建一个执行上下文，这是 JS 代码执行的环境容器。

简单来说变量环境、词法环境、执行代码三者共同构成了执行上下文对象，所有 JS 代码的运行dou依托于这个核心对象。

执行上下文分为三种类型：全局执行上下文、函数执行上下文、Eval 函数执行上下文。

// 全局代码编译 → 执行 console.log; // 输出：undefined var num = 100; // 编译阶段声明num，执行阶段赋值100 // 函数声明提升 fn; // 输出：函数执行成功 function fn { console.log; } // 对比：函数表达式不会提升 console.log; // 输出：undefined var foo = function { console.log; }; foo; // 输出：函数表达式

代码解析这个示例清晰体现了 JS「先编译、后执行」的核心流程，也解释了变量提升和函数提升的底层原因。

编译阶段的核心工作是创建执行上下文，并完成变量、函数、形参的声明处理，具体分为四步：

变量环境专门存储var声明的变量和function声明的函数。

咱就是说在 JS 编译阶段，引擎会扫描代码，将var声明的变量、函数声明提前存入变量环境，这也是变量提升和函数提升的根源。

调用栈 是 JS 引擎用来管理函数调用关系的数据结构，它遵循后进先出的原则。

// 全局执行上下文入栈 console.log; // 定义函数 function func1 { console.log; func2; // 调用func2 } function func2 { console.log; } func1; // 调用func1 console.log;

调用栈执行流程全局上下文入栈 → func1 入栈 → func2 入栈 → func2 执行完毕出栈 → func1 执行完毕出栈 → 全局代码继续执行。

JavaScript的执行原理主要包括:客户端请求网页、服务器响应请求、客户端浏览器解释并执行脚本代码。

// 递归无终止条件，栈溢出 function recursion { recursion; } recursion; // 报错：Maximum call stack size exceeded

害，说到这你有没有想过为什么有些网站的内容不被收录呢？比如你写了一篇hen不错的技术文章，结果搜索的时候却搜不到，对吧？这里面有hen多原因，比如网站结构不友好，或者内容质量不够高，又或者是外部链接太少等等。你得好好检查检查，是不是这些原因导致的。

// var 无块级作用域 if { var num1 = 100; } console.log; // 输出：100 // let 有块级作用域 if { let num2 = 200; } console.log; // 报错：num2 is not defined

// var 重复声明，无报错 var name = "张三"; var name = "李四"; console.log; // 输出：李四 // let 重复声明，报错 let age = 18; let age = 20; // 报错：Identifier 'age' has already been declared

// const 必须初始化 const PI; // 报错：Missing initializer in const declaration // 基础数据类型不可修改 const PI = 3.14; PI = 3.15; // 报错：Assignment to constant variable // 引用数据类型：可修改内部属性，不可修改地址 const obj = { name: "张三" }; obj.name = "李四"; // 正常执行 obj = {}; // 报错：Assignment to constant variable 理解 JS 执行机制，是掌握作用域、闭包、异步任务、事件循环等高级知识点的基础。无论是日常开发中的代码调试，还是面试中的底层原理考察，透彻理解这些知识点，douNeng让我们写出geng规范的代码。