图解JavaScript执行机制：从声明提升到调用栈

“夯实基础上篇-图解 JavaScript 执行机制” 本文深入浅出地解析了JavaScript的执行机制，包括声明提升（Hoisting）、JavaScript代码的编译与执行过程、执行上下文以及调用栈等核心概念。作者通过9个示例（demo）和18张图表，配以2.4千字的详细解说，旨在帮助读者巩固JavaScript基础知识。 首先，文章介绍了hoisting（声明提升），这是JavaScript中的一种特性，使得变量和函数声明会被提升到它们所在作用域的顶部。例如，示例代码中的`showSinger`函数和`var singer`变量在实际执行时，仿佛被提前到了代码的开头。函数声明的提升允许函数在定义之前就能被调用，而var变量则会被初始化为undefined。然而，let和const声明的变量不会被提升，而是存在“暂时性死区”，这意味着在声明之前尝试访问它们会导致错误。 接着，文章探讨了JavaScript代码的执行过程。JavaScript引擎首先进行编译阶段，构建执行上下文和调用栈。执行上下文是JavaScript运行时环境的抽象表示，分为全局执行上下文、函数执行上下文和eval执行上下文。每当函数被调用时，都会创建一个新的函数执行上下文，并推入调用栈中。全局执行上下文始终在栈底，是程序执行的起点。 调用栈是用来管理函数调用和返回的结构，遵循后进先出（LIFO）原则。当函数被调用，其执行上下文会被推入栈顶，完成执行后，该上下文会从栈顶弹出，控制权返回到调用它的上下文。这个过程对于理解函数如何共享和封闭变量至关重要，特别是在涉及作用域链和闭包的概念时。 文章虽然没有直接涵盖作用域链和闭包，但它们是JavaScript执行机制的延伸。作用域链决定了变量的查找顺序，而闭包则是函数能够访问并保持对外部作用域变量的引用，即使外部作用域已经结束。 总结，本篇文档是JavaScript初学者和进阶者理解语言底层运作原理的宝贵资源，通过实例和图表清晰地展示了JavaScript执行机制的关键方面。对于想要深入理解JavaScript的人来说，这是一篇不容错过的内容。后续的“夯实基础中篇-图解作用域链和闭包”将继续深入探讨这些主题。