JavaScript 是一门常见的前端语言，它在执行代码之前需要进行预编译。本文将深入探讨 JavaScript 的预编译原理，并提供示例代码。
预编译是什么？
JavaScript 可以被看作是一种解释型语言，即每次执行代码时都需要对其进行解释。然而，在执行代码之前，JavaScript 引擎会对一些代码进行预处理，这个过程被称为预编译。
在预编译阶段，JavaScript 引擎会创建一个变量对象（Variable Object），所有的函数和变量声明都会被存储在这个变量对象中。此外，JavaScript 还会对函数进行预编译，将函数中的变量声明和函数声明提升到函数顶部。
变量对象
变量对象是一个特殊的对象，它存在于函数的执行上下文中。在预编译阶段，JavaScript 引擎会创建一个变量对象，并将函数参数、变量声明和函数声明存储在其中。在函数执行期间，JavaScript 引擎会使用变量对象来跟踪函数内部的变量和函数。
例如，以下代码：
function foo(x, y) {
var a = 5;
function bar() {}
}在预编译阶段，JavaScript 引擎会创建一个变量对象，其中包含了以下内容：
-- -------------------- ---- -------
-
---------- -
-- --
-- --
------- -
--
-- ----------
---- ----------
-注意，变量 a 和函数 bar 都被赋值为 undefined。这是因为 JavaScript 引擎在预编译阶段只会声明变量和函数，而不会对它们进行赋值。
在函数执行期间，JavaScript 引擎会使用变量对象来跟踪函数内部的变量和函数。例如，当函数 foo 执行时，变量 a 的值将被设置为 5。
函数预编译
除了变量对象之外，JavaScript 还会对函数进行预编译。在预编译阶段，JavaScript 引擎会扫描函数中的所有变量声明和函数声明，并将它们提升到函数顶部。这个过程被称为函数预编译（Function Hoisting）。
例如，以下代码：
foo();
function foo() {
console.log("Hello, world!");
}在预编译阶段，JavaScript 引擎会将函数 foo 提升到代码的顶部，因此可以在调用 foo 之前声明该函数。实际上，以上代码等价于以下代码：
function foo() {
console.log("Hello, world!");
}
foo();请注意，只有函数声明会被提升到函数顶部，而函数表达式不会被提升。
示例代码
以下是一些示例代码，演示了 JavaScript 预编译的工作原理：
-- -------------------- ---- -------
------
-------- ----- -
---------------
--- - - --
-
-- ------------
--- - - --
-------- ----- -
-- ---- -
--- - - ---
-
---------------
-
------
-- -----在第一个示例中，函数 foo 在预编译阶段被提升到代码的顶部。但由于变量 a 被定义在后面，因此它的值在函数执行时为 undefined。
在第二个示例中，函数 bar 包含一个条件语句和一个变量声明。由于 JavaScript 引擎会将变量声明提升到函数顶部，变量 x 的值在该函数内的所有位置都可用。因此，在函数执行时，变量
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/865