JavaScript预编译和执行过程详解

在JavaScript中，代码的执行过程涉及到了预编译和执行两个重要步骤。本篇攻略将会详细讲解这两步骤的具体内容，以及他们的执行顺序和影响。

预编译

在JavaScript中，当一段代码被执行之前，它会先进行预编译，即将所有变量的声明提前到当前作用域的顶部，也称为变量提升。这个过程是在代码执行之前自动完成的。

变量提升

在JavaScript中，被声明的变量（包括函数）会被提前到当前作用域的顶部，但是赋值语句并不会提前。

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

上面的代码被预编译后，会被解析成以下代码：

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

由此可见，虽然被声明的变量被提前到了作用域顶部，但它的值仍然是undefined。

函数提升

除了变量提升，函数声明也可以被提升到当前作用域的顶部。比如：

foo();
function foo() {
  console.log('你好，世界！');
}

上面的代码被预编译后，会被解析成以下代码：

function foo() {
  console.log('你好，世界！');
}
foo();

由此可见，虽然函数在调用之前被定义了，但是由于函数的声明被提升到了作用域顶部，所以可以在调用之前使用该函数。

注意事项

• 变量提升只对声明的变量有效，赋值语句并不会提前；
• 变量提升和函数提升的优先级不同，具体请看示例说明。

执行过程

在JavaScript中，代码的执行顺序是从上往下，从左往右进行的。在执行过程中，变量和函数的声明已经被提前到了作用域顶部，所以代码会按照预期的顺序执行。

示例1

var x = 1;
function foo() {
  console.log(x); // undefined
  var x = 2;
  console.log(x); // 2
}
foo();

上面的代码执行过程如下：

1. var x = 1; 变量 x 被声明并赋值为 1；
2. foo() 被调用，函数开始执行；
3. 在 foo() 函数内，var x = 2; 声明了一个新的变量 x，并赋值为 2；
4. console.log(x); 输出 2，因为此时 x 的值为 2。

由此可以看出，在函数中声明的变量会覆盖外部的同名变量，这种现象称为“作用域链”。

示例2

var x = 1;
function foo() {
  console.log(x); // 1
}
foo();

上面的代码执行过程如下：

1. var x = 1; 变量 x 被声明并赋值为 1；
2. foo() 被调用，函数开始执行；
3. 在 foo() 函数内部，发现 x 在当前作用域中不存在，就会到上一级作用域查找，即全局作用域中；
4. console.log(x); 输出 1，因为此时 x 的值还是 1。

由此可以看出，如果在函数内部没有声明变量，使用的变量则会到上一级作用域中查找，直到找到为止。

总结

作为一个程序员，在 JavaScript 的学习过程中，了解预编译和执行过程的相关知识是非常重要的。本篇攻略将核心内容归纳如下：

1. 在 JavaScript 执行之前，会先进行预编译，将所有变量的声明提前到作用域顶部，被称为变量提升；
2. 变量提升和函数提升的优先级不同，需要注意；
3. 在预编译阶段只进行声明，赋值操作并不进行；
4. 在代码真正执行时，变量和函数的声明已经被提前到了作用域顶部，所以代码会按照预期的顺序执行；
5. 如果在函数内部没有声明变量，使用的变量则会到上一级作用域中查找，直到找到为止。