学习JavaScript中的“提升”

通过之前的文章，我们熟悉了作用域的基本概念。但是作用域中的变量，函数声明在什么地方查找，引用它们的时候又发生了什么。正是我们将要讨论的内容。

在我们的认知中 JavaScript 代码在执行的时候是由上到下一行一行执行的。但实际上并不完全正确。例如：

a = 1;
var a;
console.log(a);
复制代码

按照我们之前的认知由上到下，最后 a 输出 undefined ，因为 var a 声明在 a = 1 后面，但最后输出的结果是 1 。

考虑另外一段代码：

console.log(a);
var a = 1;
复制代码

鉴于上一个代码片段所表现的特点，可能认为这个代码片段也会输出 1 ，或者可能抛出异常错误。实际上输出的是 undefined 。

那么到底是声明在前，还是赋值在前？

回顾JavaScript引擎

为了弄明白这个问题，我们需要再次回顾 JavaScript 引擎，引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一个很重要的工作就是找到所有的声明，并在合适的作用域中将它们关联起来。

执行环境

执行环境也可以叫执行上下文，每当 JavaScript 编译器工作时，都会创建一个执行环境或者说进入一个执行上下文中。它们定义了变量或函数访问其他数据的权限，决定了它们各自的行为。它们在逻辑上组成一个堆栈，堆栈底部永远是全局环境，而顶部就是当前环境。

例如：我们可以定义执行环境是一个数组：

stack = [];
复制代码

在初始化阶段， stack 是这样的：

stack = [
    globalContext
];
复制代码

每次函数执行，进入 function 的时候，这个堆栈都会被压入。

function foo(){
    return 'hello';
}
foo();
复制代码

那么, stack 将会发生改变：

stack = [
    <foo> functionContext
    globalContext
];
复制代码

每次函数退出也就是执行到 return 的时候，都会退出当前的执行环境，相应的 stack 就会弹出，栈中的指针会移动位置。相关代码执行完毕后， stack 只会包含全局环境，一直到整个程序结束。

变量对象

在进行 JavaScript 编程是总避免不了声明函数和变量，在每个执行环境中有一个变量对象，我们定义的所有变量和函数都保存在这个对象中。

变量对象（VO）存储一下内容：

函数声明（function）

变量声明（var）

我们可以用一个 JavaScript 对象来表示一个变量对象例如：

VO = {};
复制代码

如前面所说执行环境中有一个变量对象，它是执行环境的一个属性，例如：

context = {
    VO = {};
}
复制代码

当我们声明一个变量或一个函数的时候，例如：

var a = 1;
 
function foo() {
  var b = 20;
};
 
test();
复制代码

对应的变量对象是：

//全局环境的变量对象
globalContext: {
    vo: {
        a: 1,
        foo: function
    }
}
//foo函数环境的变量对象
fooContext: {
    vo: {
        b: 20
    }
}
复制代码

函数声明和变量声明会被提升

现在终于到了本文的核心点了，当我们的代码运行时，首先在执行环境的变量对象中声明变量和函数，然后才是代码执行阶段。当我们看到 var a = 1 时，实际上 JavaScript 会将其看成两部分： var = a 和 a = 1 。

var a;
a = 1;
复制代码

函数优先

函数声明会首先被提升，然后才是变量，例如：

foo(); // 1
var foo;
function foo() { 
    console.log( 1 );
}
foo = function() { 
    console.log( 2 );
};
复制代码