JavaScript 详解预编译原理

JavaScript 详解预编译原理

什么是预编译

• 预编译是 JavaScript 在运行代码之前先对代码进行处理的一个过程。
• 预编译过程中，JavaScript 引擎会遍历当前作用域内的所有代码，然后将变量和函数名提前声明，形成一个预编译作用域。

预编译过程简介

预编译过程分为三个步骤，分别是变量声明、函数声明和变量赋值。

变量声明

在预编译阶段，JavaScript 引擎会查找当前作用域内的所有变量声明/定义，并提前在作用域内声明了这些变量。这被称为变量提升。

示例代码：

console.log(a);  // undefined
var a = 1;

在预编译时，JS 引擎查找变量声明，发现了变量 a 的声明，所以它会提前在作用域中声明了变量 a，并将其初始化为 undefined。当代码执行到 a = 1 时，它就会将变量 a 的值设置为 1。

函数声明

函数声明与变量声明类似，可以在任何地方声明一个函数，函数声明会被 JavaScript 引擎提前在当前作用域中进行声明，这样在之后就可以在当前作用域中任何地方使用这个函数。

示例代码：

foo();  // 输出 Hello
function foo() {
  console.log('Hello');
}

在预编译时，JS 引擎会查找函数声明，并将其提前在作用域中声明，所以当代码执行到 foo(); 时，JavaScript 引擎就找到了已经提前声明的函数，并且可以正常调用。

变量赋值

如果在当前作用域中存在一个变量，它还没有被声明，那么在赋值时，JavaScript 引擎就会在当前作用域中创建一个全局变量（浏览器中的全局变量是 window 对象）。

示例代码：

var a = 'Hello';
function foo() {
  a = 'World';
  console.log(a);
}
foo();  // 输出 World
console.log(a);  // 输出 World

在预编译时，变量 a 被声明，并初始化为 undefined，在函数 foo 内部执行 a = 'World' 赋值时，变量 a 实际上是在当前作用域中查找到了变量 a，并将其值设置为 'World'，因此在全局作用域中也可以访问到变量 a，其值也为 'World'。

总结

预编译是 JavaScript 在运行代码之前进行的一个处理过程，其主要目的是为了在执行代码时优化查找变量和函数名的速度，提高代码的执行效率。在预编译过程中，JavaScript 引擎会遍历当前作用域内的所有代码，并创建一个预编译作用域，将变量和函数名提前声明。