何为预编译

预编译（也称为提升，Hoisting）是JavaScript中一个核心的概念，它影响着变量与函数的声明如何在代码执行前被处理。这一机制使得开发者在编写代码时需要注意声明的位置，因为它们的行为可能并不完全符合直观的顺序执行逻辑。本文将深入探讨变量声明、函数声明的提升，以及函数和全局环境中的预编译过程，并介绍调用栈这一概念，帮助理解JavaScript程序的执行流程。

变量声明与提升

在JavaScript中，变量可以通过var、let、const关键字进行声明。其中，只有使用var声明的变量会受到提升的影响。当使用var声明一个变量时，尽管该声明可能出现在代码的任何位置，但在实际执行前，解释器会将其视为已经声明在当前作用域的顶部，这就是所谓的变量声明提升。

例如，下面的代码虽然在逻辑上看起来像是先使用后声明，但由于提升机制，它是合法的：

console.log(a); // 输出 undefined
var a = 5;

实际上，这段代码会被解释器当作如下处理：

var a; // 变量声明被提升
console.log(a);
a = 5; // 变量赋值依然保持原位置

然而，let和const引入了块级作用域，并且它们遵循暂时性死区规则，这意味着这些声明不会被提升到其所在块的顶部，而是在执行到声明语句时才被创建。

函数声明与整体提升

与变量声明类似，函数声明也会被提升至所在作用域的顶部。但值得注意的是，函数声明不仅仅是名称被提升，整个函数定义（包括函数体）都被提升，这使得我们可以在声明之前调用函数：

foo()//正常输出2
function foo(){
    var a = 2;
    console.log(a);
}

这里，尽管函数调用在函数声明之前，但由于函数声明的整体提升，调用能够成功执行。

函数中的预编译

每当一个函数被调用时，都会创建一个新的执行上下文，这个上下文包含了函数执行所需的所有信息，包括局部变量、参数等。这个过程可以分为以下几个步骤：

创建激活对象

创建函数的执行上下文对象 AO{Activation Object}

形参和变量声明初始化

找形参和变量声明，将形参和变量名作为AO的属性，值为undefined

实参与形参的绑定

将实参和形参统一

函数声明覆盖

在函数体内找函数声明，将函数名作为AO的属性名，值赋予函数体

function fn(a) {
    console.log(a);//输出[Function: a]
    var a = 123;
    console.log(a);//输出123
    function a() { }//函数声明
    console.log(a);//输出123
    var b = function () { }//函数表达式
    console.log(b);//输出[Function: b]
    function d() { }
    var d = a;//输出123
    console.log(d);
}
fn(1);

以这段代码为例:

创建激活对象

AO={}

形参和变量声明初始化

AO={
    a:undefined,
    b:undefined,
    d:undefined
}

实参与形参的绑定

AO={
    a:1,
    b:undefined,
    d:undefined
}

函数声明覆盖

AO={
    a:function a(){},
    b:function b(){},
    d:function d()
}

最终开始编译

AO={
    a:123,
    b:function b(){},
    d:123
}

全局的预编译

全局执行上下文（Global Execution Context, GEC）是程序开始执行时创建的第一个执行上下文。它同样遵循预编译规则，具体步骤如下：

创建全局对象（GO, Global Object）

在浏览器中，这通常是window对象，在Node.js中则是global对象。

变量声明

所有使用var声明的全局变量都会成为GO的属性，初始值为undefined。

函数声明

与函数内部相同，全局作用域中使用function关键字声明的函数也会被添加到GO中，其名称作为属性，值为函数体。

var global=100
function fn(){
    console.log(global);
}
fn();//输出100