JavaScript 是如何工作的——揭开 JavaScript 执行的神秘面纱

2024-02-15 13:04:37

深入理解 JavaScript 引擎：代码执行的幕后推手

你写下一行行 JavaScript 代码，它们在浏览器里神奇地运行，网页由此变得生动有趣。但你是否想过，这些代码是如何被浏览器理解和执行的呢？这背后，就离不开 JavaScript 引擎的默默工作。

JavaScript 引擎，简单来说，就是一种专门负责解释和执行 JavaScript 代码的程序。当你在浏览器中打开一个网页，或者在 Node.js 环境下运行 JavaScript 程序时，JavaScript 引擎就开始工作了。它就像一位翻译官，将你写的 JavaScript 代码翻译成计算机能够理解和执行的机器指令。市面上有很多不同的 JavaScript 引擎，比如大名鼎鼎的 V8 引擎（Chrome 和 Node.js 都在用它）和 Firefox 使用的 SpiderMonkey 引擎。

代码执行三部曲：解析、编译、执行

JavaScript 引擎的工作流程，大体可以分为三个阶段：解析、编译和执行。

首先，引擎会对你的 JavaScript 代码进行解析。它会仔细分析代码的语法结构，把代码拆解成一个个小的单元，并构建出一棵抽象语法树（AST）。你可以把 AST 想象成代码的骨架，它用树形结构清晰地展现了代码的组成部分和它们之间的关系。

接下来，引擎会对 AST 进行编译，把它转换成一种叫做字节码的中间代码。字节码是一种更接近机器语言的代码，引擎可以直接执行它，效率更高。

最后，引擎会执行字节码。它会按照字节码中的指令，一步一步地执行你的 JavaScript 代码，最终实现你想要的功能。

执行上下文：代码运行的环境

JavaScript 代码的执行，需要一个特定的环境，这个环境叫做 执行上下文 。每个函数都有自己的执行上下文，当函数被调用时，引擎会创建一个新的执行上下文，并将它推到一个叫做调用栈的数据结构中。

执行上下文包含了代码执行所需的所有信息，比如变量、函数、作用域链等等。你可以把它想象成一个容器，里面装着代码运行所需的各种工具和材料。

调用栈：函数调用的追踪器

调用栈 就像一个记录器，它记录了函数的调用顺序。当一个函数被调用时，它的执行上下文会被推入调用栈的顶部；当函数执行完毕后，它的执行上下文会被弹出调用栈。

通过调用栈，引擎可以追踪函数的调用关系，确保代码按照正确的顺序执行。如果函数调用嵌套了很多层，调用栈就会变得很长，就像一摞盘子，一层一层地叠起来。

作用域链：变量的查找路径

在 JavaScript 中，变量的访问是受作用域限制的。一个变量只能在它被定义的作用域内访问，不能跨作用域访问。

作用域链 就是用来帮助引擎查找变量的。它像一条链子，连接着当前执行上下文和它的父级执行上下文，一直到全局执行上下文。当引擎需要查找一个变量时，它会沿着作用域链逐级向上查找，直到找到为止。

词法作用域与动态作用域

JavaScript 采用的是 词法作用域 ，也就是说，变量的作用域在代码编写阶段就已经确定了，它由变量在代码中的位置决定，而不是在代码运行时决定。

与词法作用域相对的是 动态作用域 ，在动态作用域中，变量的作用域在代码运行时才能确定，它由变量被调用时的位置决定。

闭包：函数的记忆

闭包是 JavaScript 中一个非常重要的概念，它指的是一个函数和它所处的词法环境的组合。闭包可以让函数访问其创建时的变量，即使函数已经执行完毕。

闭包的应用非常广泛，比如在回调函数、事件处理函数等场景中，我们都可以利用闭包来保存一些状态信息。

常见问题解答

JavaScript 引擎和 JavaScript 运行时环境有什么区别？

JavaScript 引擎是 JavaScript 运行时环境的一部分。JavaScript 运行时环境除了引擎之外，还包括一些其他的组件，比如 Web API、事件循环等等。引擎负责解释和执行 JavaScript 代码，而运行时环境则提供了代码运行所需的环境。
V8 引擎为什么这么快？

V8 引擎之所以快，是因为它采用了 JIT（Just-In-Time）编译技术。JIT 编译器会在代码执行过程中，将热点代码编译成机器码，从而提高代码的执行效率。
JavaScript 中的垃圾回收机制是如何工作的？

JavaScript 引擎会定期扫描内存，查找不再被引用的对象，并将它们回收。垃圾回收机制可以有效地防止内存泄漏，提高程序的稳定性。
JavaScript 中的异步编程是如何实现的？

JavaScript 中的异步编程是通过事件循环和回调函数来实现的。事件循环会不断地检查事件队列，如果有事件发生，就会执行相应的回调函数。
JavaScript 中的 Promise 和 async/await 是什么？

Promise 和 async/await 都是 JavaScript 中用于处理异步操作的工具。Promise 可以让我们以更优雅的方式处理异步操作的结果，而 async/await 则可以让异步代码看起来像同步代码一样，更容易理解和维护。