代码真的被提升了吗

jiezi

6 年前

function f() {console.log(a); // ?
    var a = 1;
}
f();

简单简单，打印结果是 undefined。为啥？因为变量提升，变量 a 的声明被提升到当前作用域的顶部了。也就是可以想象成这样：

function f() {
    var a;
    console.log(a);
    a = 1;
}

此外，还有函数提升，和变量提升类似：

f1();

f2();

function f1() { console.log(1) }

function f2() { console.log(2) }

f1 和 f2 被提升了，所以不会报错。很多文章中都会经常提到提升这个概念。
但是，这是真的吗？JS 解释器在执行代码时还顺带帮你变动一下代码的顺序？想想也觉得不太可能嘛~ 那么到底是咋回事捏？

JavaScript 的可执行代码（executable code）有三种，分别为 全局代码 、 函数代码 以及 eval 代码。鉴于 eval 不被推荐使用，咱就不理它。

当执行全局代码时，会创建一个全局执行上下文。当执行一个函数的时候，会创建一个函数执行上下文。全局执行上下文只会有一个，而函数执行上下文可以有很多很多个。JS 引擎会创建 执行上下文栈（execution context stack, ECS）去管理这些执行上下文。我们以函数执行上下文为例。

对于一个执行上下文而言，可以抽象化为这样一个对象：

contextObject = {
    VariableObject,
    ScopeChain,
    thisValue
}

其中变量对象（Variable Object，VO）是包含与当前执行上下文相关的数据作用域，它存储着当前上下文中定义的变量声明、函数声明（注意：不包含函数表达式），另外函数执行上下文中还会有参数。

变量对象是一个抽象概念，在不同的执行上下文中会以不同的对象呈现。比如在全局上下文中，变量对象就是全局对象本身（这也是为什么我们能够通过全局对象的属性名称引用全局变量）。而对于函数执行上下文，是用活动对象（Activation Object，AO）来表示变量对象的，我们访问的便是活动对象上的属性。

执行上下文中的代码会被分出两个阶段进行处理，分别为：

进入执行上下文，即分析创建阶段
执行代码，即执行阶段

此时进入执行上下文，但在开始执行代码之前。此时的变量对象：

如果是函数上下文，那么会通过函数的 arguments 属性初始化，并处理形参。此时变量对象中会包含一个 arguments 对象，以及所有的形参，并且会检查是否有与之对应的实参，有则值初始化为实参的值，没有的话就设为 undefined。
处理函数声明。开始处理函数声明，再次提醒，函数表达式不会被处理。此时会检查变量对象中是否已经有同名属性，如果有，则替换它，如果没有则创建属性，值初始化为对应的函数对象。
处理变量声明。与处理函数声明不同的是，如果变量对象中存在有同名属性，此时会跳过该变量不做任何事，即不会产生覆盖，如果没有则创建属性并初始化为 undefined。

了解了第一个阶段，那么来看个例子：

function f(a, b) {
    var c = 3;
    function d() {};
    var e = function() {};
    (function f() {});
}

f(1, 2);

当执行 f 函数时，进入执行上下文，我们可以描述出此时的 AO：

AO = {
    arguments: {
        0: 1,
        1: 2,
        length: 2
    },
    a: 1,
    b: 2,
    c: undefined,
    d: reference to function() {},
    e: undefined,
}
// 注意：(function f() {}) 为函数表达式，不会被处理

执行阶段就相对简单，代码顺序执行，并且会根据代码去修改变量对象中的值，所以当函数执行完后的 AO 会是：

AO = {
    arguments: {
        0: 1,
        1: 2,
        length: 2
    },
    a: 1,
    b: 2,
    c: 3,
    d: reference to function() {},
    e: reference to function() {},
}

综上所述：

全局上下文的变量对象即是全局对象；
函数上下文的变量对象会以 arguments 对象初始化；
在第一个阶段会依次给变量对象添加形参（函数上下文）、函数声明、变量声明；
在第二个阶段，会修改变量对象中的属性值。

console.log(f); // ?

function f() {}
var f = 1;

打印结果会是一个函数对象。因为第一个阶段中先处理函数声明后处理变量声明，当处理变量声明时变量对象中已经存在同名属性 f，不会做任何事直接跳过，所以 f 的值会是一个函数。

你也可以多找几道题尝试分析以加深理解。当然，日常工作中还是直接想成提升来得方便些，只是希望通过本文能让你了解到一些背后的事情。最后，如果文中有任何错误或不足之处，还请指出~

代码真的被提升了吗

变量提升 & 函数提升

可执行代码

执行上下文

变量对象

执行过程

分析创建阶段

执行阶段

总结

思考题