先从一道经典的面试题说起

test();
console.log(netName);
var netName = '前端盼哥';
function test() {
  console.log('函数test被执行');
}

如果你很轻松做出这道题目并且能够清晰地解释清楚原因，那下边的内容就不浪费大佬的时间了，如果你不会做或者不会分析那我们一起往下探索。

我相信学习javaScript的同学都知道 javaScript是按顺序执行的，那么按照这个逻辑分析的话，第一行代码执行应该报错。第二行代码执行也应该报错。可事实是什么呢？我们看下实际的运用结果。

在控制台运行后发现两行代码运行后都没有报错，第一行执行结果为 “函数test被执行”，第二行执行结果为 undefined ，显然变量netName和函数test在声明之前都能正常使用不会报错。那这到底是为什么呢？要搞清楚这个原因我们必须了解javaScript的执行流程。

JavaScript 代码的执行流程

一段javaScript代码在执行之前是需要被javaScript引擎编译的，编译完成后才能执行，基本流程如图所示：

由图可以看出一段javaScript代码经过编译后会生成执行上下文和可执行代码两个部分。

执行上下文是一段javaScript代码运行时的环境，如上图为全局执行上下文环境，当调用一个函数时会创建该函数的执行上下文环境。

编译阶段

test();
console.log(netName);
var netName = '前端盼哥';
function test() {
  console.log('函数test被执行');
}

接下来我们分析下这段代码的编译过程：

1. 第一行、第二行代码不存在声明操作javaScript引擎不作处理。
2. 第三行通过var声明变量netName，javaScript引擎会在全局上下文环境中的变量环境中创建一个netName属性并为其初始化默认值为undefined。
3. 第四行是由function声明了一个test函数, javaScript引擎会在全局上下文环境中的变量环境中创建一个test属性并赋值为堆内存中的地址（js对于对象类型的值都存储在堆内存中会有一个对应的地址，此处你可以理解为快递员把快递放在蜂巢给你一个取货码，你用取货码去蜂巢取快递）。
4. 剩余的非声明部分代码javaScript引擎会编译为字节码。

到此为止编译过程基本完成，一段javaScript代码经过编译生成了执行上下文和可执行代码。

我们再用代码模拟下这个过程：

//变量声明并默认初始化为undefined;
var netName = undefined; 
//把函数声明并直接赋值
function test(){
  console.log("函数test被执行");
}

//可执行代码
test();
console.log(netName);
//当具体执行到时才会赋值
netName = "前端盼哥";

通过运行模拟代码发现跟原面试题代码运行结果一致，这段模拟代码就是更形象地展示了js的一个编译过程。在这个过程中我们发现代码中声明的部分会被提前，我们通常把这个行为叫做变量提升。变量提升后会被默认赋值为undefined 而函数声明会直接赋值。

经常提到大家都在说变量提升是把变量提升到代码的开头，其实这个说法是不正确的，在代码中的位置没有发生任何变化，只是在javaScript引擎编译过程中生成执行上下文时（代码运行环境，就好比美女出门约会之前必须化妆一样，这个必备的准备工作）将变量创建初始化并存储在内存中（也就是上图中的全局上下文环境中的变量环境以及堆内存）为后续代码的执行阶段做好准备工作。

执行阶段

经过上边的分析我们发现javaScript引擎在编译阶段生成了可执行代码。那么执行阶段就一行一行执行。具体过程如下(用上边的变量提升效果模拟代码进行说明)：

1. 执行第9行 test()时javaScript引擎会在全局上下文环境的变量环境中寻找test这个函数（变量环境中存储了这个函数名称test它具体指向堆内存中的一个地址，在堆内存中有具体函数体）并执行 控制台输出“函数test被执行”。
2. 执行第10行console.log(netName)时，首先会在全局上下文找console.log函数（内置函数所以默认就有的）然后在变量环境中找netName变量（此时变量环境中存储了名为netName的变量并且值为undefined）最终控制台输出“undefined”。
3. 执行第12行时，同样在变量环境中寻找netName变量，找到并为其赋值为"前端盼哥"（此时全局上下文中的变量环境中的netName属性值更新为"前端盼哥"）。

那么如果第13行再增加一行代码console.log(netName)；你觉得应该输出什么？很显然此时去寻找到这个变量它的值已经变成了“前端盼哥”。这就是完整地执行过程，整个过程找变量找函数都不是在代码前边找而是在全局上下文中的变量环境中找。

我想经过如上编译过程分析以及执行过程分析你应该对变量提升有一个正确的认识，希望大家把javaScript执行流程图 存在脑子里，其实也是大家要理解原理自己会分析会画这样的流程图，我想再难的问题都迎刃而解。

我相信只要写过一段时间代码的小伙伴还会有以下几个疑问：

1. 变量名称跟函数名称一致的话会怎样？
2. 函数声明是声明并赋值那函数表达式呢？
3. 如果两个函数重名呢？

变量与函数重名

foo(); //“我是foo函数”
var foo = "我是变量foo";
function foo(){
  console.log("我是foo函数");
}

编译过程

首先进行编译阶段，我们还是用一张图直观地给大家展示一下，如下图所示：

通过上图我们发现编译过程中没有在变量环境中发现foo = undefined 这是因为当函数名称跟变量名称重名时函数优先，尽管有var foo = "我是变量foo"；但是函数声明优先同名变量会被忽略。

执行过程

1. 当执行第一行代码foo函数时在变量环境中寻找变量foo它的值指向堆内存中的一个地址，因此找到函数foo并执行输出结果“我是foo函数”；
2. 执行foo = "我是变量foo"时，在变量环境中寻找到变量foo赋值为“我是变量foo”此时函数的内存地址被覆盖。

如果这段代码改成如下这样又分别输出结果是什么呢？请大家自行分析解答。

foo(); 
var foo = "我是变量foo";
function foo(){
  console.log("我是foo函数");
}
console.log(foo);
foo();

函数表达式如何处理

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

该段代码控制台运行结果如下图所示：

结果不是输出1而是报错TypeError: foo is not a function 这是因为函数表达式在编译阶段的处理跟函数声明不一样不是声明并赋值而是跟var声明的变量一致，创建变量foo并初始化默认值为undefined，因此执行第一行代码时对undefined进行了调用而不是函数所以类型错误foo不是一个函数。

两个函数重名

foo();
function foo(){
  console.log(1);
}
function foo(){
  console.log(2);
}

编译这段代码第2行会在全局上下文环境中的变量环境中创建foo属性并在堆内存中存储函数体生成一个地址赋值给foo属性，当编译到第5行会在全局上下文环境中发现已经存在foo属性因此会在堆内存中存储函数体生成一个新地址并更新foo属性值为新地址（也就是说后声明的函数会覆盖掉先声明的同名函数）。所以这段代码最终执行结果为输出2。

好了今天的内容就到这里，我相信当你了解了编译跟执行两个过程，拿到一段代码自己能够画出执行流程图那么这类型的题目将不再有任何困难。也希望大家能够对上述几种类型的题目进行延伸变形去分析编译过程执行过程以及在控制台运行验证强化理解。

注意：1. 本文中执行上下文只讲了全局执行上下文没有讲函数的执行上下文我们会在后边的文章中具体说明。

2. 执行流程图中变量环境中的函数没有写成堆内存的地址是因为我们还没有详细介绍javaScript数据存储，因此暂且直接写成函数体请大家知晓。

课后练习

看下边这段代码，运行的结果应该是什么？并画出分析图。

foo();
console.log(a);
var a = 4;
function foo(){
     console.log(a);
     var a = 6;
     console.log(a);
  }
console.log(a);

欢迎大家在留言区分享自己的想法跟分析过程，如果这篇文章对你有所帮助，也请分享给身边的朋友一起探讨一起学习一起进步。本人能力有限如有错误请及时反馈我将第一时间纠正，谢谢大家。