Javascript执行机制（一）变量提升

发表于 更新于 分类于 Waline：

只有理解了 JavaScrip 的执行上下文，你才能更好地理解 JavaScript 语言本身，比如变量提升、作用域和闭包等。不仅如此，理解执行上下文和调用栈的概念还能助你成为一名更合格的前端开发者。这次我们就从上下文的角度讲一下js的变量提升。

先看下面的代码：

1
2
3
4
5
6
showName()
console.log(myname)
var myname = 'ray'
function showName() {
    console.log('函数showName被执行');
}

对于熟悉js的人来说，这段代码的输出很容易判断，它会分别打印出：

1
2
函数showName被执行
undefined

而如果我们把上面的代码改成

1
2
3
4
5
showName()
console.log(myname)
function showName() {
    console.log('函数showName被执行');
}

这个时候就会抛出一个变量未定义的错误。

  • 从上面两段代码的执行结果来看，我们可以得出如下三个结论。

  • 在执行过程中，若使用了未声明的变量，那么 JavaScript 执行会报错。

  • 在一个变量定义之前使用它，不会出错，但是该变量的值会为 undefined，而不是定义时的值。在一个函数定义之前使用它，不会出错，且函数能正确执行。

第一个结论很好理解，因为变量没有定义，这样在执行 JavaScript 代码时，就找不到该变量，所以 JavaScript 会抛出错误。

但是对于第二个和第三个结论，就挺让人费解的：

  • 变量和函数为什么能在其定义之前使用？这似乎表明 JavaScript 代码并不是一行一行执行的。

  • 同样的方式，变量和函数的处理结果为什么不一样？比如上面的执行结果，提前使用的 showName 函数能打印出来完整结果，但是提前使用的 myname 变量值却是 undefined，而不是定义时使用的“ray”这个值。

变量提升

要解释这两个问题，你就需要先了解下什么是变量提升。

不过在介绍变量提升之前，我们先通过下面这段代码，来看看什么是 JavaScript 中的声明和赋值。

1
var myname = 'ray'

这段代码你可以把它看成是两行代码组成的：

1
2
var myname    //声明部分
myname = 'ray'  //赋值部分

上面是变量的声明和赋值，那接下来我们再来看看函数的声明和赋值，结合下面这段代码

1
2
3
4
5
6
7
8

function foo(){
  console.log('foo')
}

var bar = function(){
  console.log('bar')
}

第一个函数 foo 是一个完整的函数声明，也就是说没有涉及到赋值操作；第二个函数是先声明变量 bar，再把function(){console.log(‘bar’)}赋值给 bar。

好了，理解了声明和赋值操作，那接下来我们就可以聊聊什么是变量提升了。所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
* 变量提升部分
*/
// 把变量 myname提升到开头，
// 同时给myname赋值为undefined
var myname = undefined
// 把函数showName提升到开头
function showName() {
    console.log('showName被调用');
}

/*
* 可执行代码部分
*/
showName()
console.log(myname)
// 去掉var声明部分，保留赋值语句
myname = 'ray'

javascript执行顺序

从概念的字面意义上来看，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，正如我们所模拟的那样。但，这并不准确。实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入内存中。对，你没听错，一段 JavaScript 代码在执行之前需要被 JavaScript 引擎编译，编译完成之后，才会进入执行阶段。

编译阶段

那么编译阶段和变量提升存在什么关系呢？为了搞清楚这个问题，我们还是回过头来看上面那段模拟变量提升的代码，为了方便介绍，可以把这段代码分成两部分。

JavaScript 编译执行流程

从上图可以看出，输入一段代码，经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码。

执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。

在执行上下文中存在一个变量环境的对象（Viriable Environment），该对象中保存了变量提升的内容，比如上面代码中的变量 myname 和函数 showName，都保存在该对象中。

你可以简单地把变量环境对象看成是如下结构：

1
2
3
VariableEnvironment: 
	myname -> undefined, 
	showName ->function : {console.log(myname)

了解完变量环境对象的结构后，接下来，我们再结合下面这段代码来分析下是如何生成变量环境对象的。

1
2
3
4
5
6
7

showName()
console.log(myname)
var myname = 'ray'
function showName() {
    console.log('函数showName被执行');
}

我们可以一行一行来分析上述代码：

  • 第 1 行和第 2 行，由于这两行代码不是声明操作，所以 JavaScript 引擎不会做任何处理；

  • 第 3 行，由于这行是经过 var 声明的，因此 JavaScript 引擎将在环境对象中创建一个名为 myname 的属性，并使用 undefined 对其初始化；

  • 第 4 行，JavaScript 引擎发现了一个通过 function 定义的函数，所以它将函数定义存储到堆 (HEAP）中，并在环境对象中创建一个 showName 的属性，然后将该属性值指向堆中函数的位置（不了解堆也没关系，JavaScript 的执行堆和执行栈我会在后续文章中介绍）。

执行阶段

JavaScript 引擎开始执行“可执行代码”，按照顺序一行一行地执行。下面我们就来一行一行分析下这个执行过程：

  • 当执行到 showName 函数时，JavaScript 引擎便开始在变量环境对象中查找该函数，由于变量环境对象中存在该函数的引用，所以 JavaScript 引擎便开始执行该函数，并输出“函数 showName 被执行”结果。

  • 接下来打印“myname”信息，JavaScript 引擎继续在变量环境对象中查找该对象，由于变量环境存在 myname 变量，并且其值为 undefined，所以这时候就输出 undefined。

  • 接下来执行第 3 行，把“ray”赋给 myname 变量，赋值后变量环境中的 myname 属性值改变为“ray”，变量环境如下所示：

1
2
3
VariableEnvironment:
     myname -> "ray", 
     showName ->function : {console.log(myname)

好了，以上就是一段代码的编译和执行流程。实际上，编译阶段和执行阶段都是非常复杂的，包括了词法分析、语法解析、代码优化、代码生成等