JS真的是按照顺序执行的吗？
请先看下面的代码：
showName()
console.log(myname)
var myname = '极客时间'
function showName() {
console.log('函数 showName 被执行');
}
如果是按照顺序执行的当执行到第 1 行的时候，由于函数 showName 还没有定义，所以执行应该会报错；同样执行第 2 行的时候，由于变量 myname 函数也未定义，所以同样也会报错。
然而实际执行结果却并非如此：
第 1 行输出“函数 showName 被执行”，第 2 行输出“undefined”，这和前面想象中 的顺序执行有点不一样啊！这是为什么？请带着疑问再来看下一段代码。
showName()
console.log(myname)
function showName() {
console.log('函数 showName 被执行');
}
报错了，因为myname没有被定义。
从上面的2段代码的执行结果来看我们可以得出三个结论：
1.当JS在执行的过程中，如果使用了没有声明的变量那么 JavaScript 执行会报错。
2.使用var声明的变量可以在定义之前使用它，不会出错，但是该变量的值会为 undefined，而不是定义时的值。
3.在一个函数定义之前使用它，不会出错，且函数能正确执行。
第一条很好理解因为变量没有定义，在执行 JavaScript 代码时，就找不到该变 量，所以 JavaScript 会抛出错误。那么第二条和第三条是为什么呢？
答案：变量提升。
什么是变量提升？
所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分(用var声明的变量)和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值undefined。
var myname = '极客时间'
function foo(){
console.log('foo')
}
var bar = function(){
console.log('bar')
}
第一个函数 foo 是一个完整的函数声明，也就是说没有涉及到赋值操作；第二个函数是先 声明变量 bar，再把function(){console.log('bar')}赋值给 bar。
下面我们来模拟下实现：
/*
*
变量提升部分
*/
// 把变量 myname 提升到开头，
// 同时给 myname 赋值为 undefined
var myname = undefined
// 把函数 showName 提升到开头
function showName() {
console.log('showName 被调用');
}
/*
*
可执行代码部分
*/
showName()
console.log(myname)
// 去掉 var 声明部分，保留赋值语句
myname = '极客时间'
第一处是把声明的部分都提升到了代码开头，如变量 myname 和函数 showName，并 给变量设置默认值 undefined； 第二处是移除原本声明的变量和函数，如var myname = '极客时间'的语句，移除了 var 声明，整个移除 showName 的函数声明。
变量提升到底是怎么实现的？
从概念的字面意义上来看，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，正如我们所模拟的那样。但这并不准确。实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入内存中。
1. 编译阶段
编译阶段会将代码分为2个部分，第一个部分是变量提升的代码，第二个部分是执行部分的代码。
变量提升的代码
var myname = undefined
function showName() {
console.log('函数 showName 被执行');
}
可执行部分的代码
showName()
console.log(myname)
myname = '极客时间'
从上图可以看出，输入一段代码，经过编译后，会生成两部分内容：执行上下文 （Execution context）和可执行代码。而执行上下文又分为变量环境和词法环境。
什么是执行上下文？
执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。
变量环境的作用是什么？
变量环境是用来存放变量提升内容的。比如上面代码中的变量 myname 和函数 showName，都保存在该对象中。
VariableEnvironment:
myname -> undefined,
showName ->function : {console.log(myname)
结合下面这段代码来分析下是如何生成变量环境对象的。结合下面这段代码来分析下是如何生成变量 环境对象的
showName()
console.log(myname)
var myname = '极客时间'
function showName() {
console.log('函数 showName 被执行');
}
第 1 行和第 2 行，由于这两行代码不是声明操作，所以 JavaScript 引擎不会做任何处 理；
第 3 行，由于这行是经过 var 声明的，因此 JavaScript 引擎将在环境对象中创建一个名 为 myname 的属性，并使用 undefined 对其初始化；
第 4 行，JavaScript 引擎发现了一个通过 function 定义的函数，所以它将函数定义存储 到堆 (HEAP）中，并在环境对象中创建一个 showName 的属性，然后将该属性值指向 堆中函数的位置。
2. 执行阶段
JavaScript 引擎开始执行“可执行代码”，按照顺序一行一行地执行。下面我们就来一行 一行分析下这个执行过程： 当执行到 showName 函数时，JavaScript 引擎便开始在变量环境对象中查找该函数， 由于变量环境对象中存在该函数的引用，所以 JavaScript 引擎便开始执行该函数，并输 出“函数 showName 被执行”结果。 接下来打印“myname”信息，JavaScript 引擎继续在变量环境对象中查找该对象，由 于变量环境存在 myname 变量，并且其值为 undefined，所以这时候就输出 undefined。 接下来执行第 3 行，把“极客时间”赋给 myname 变量，赋值后变量环境中的 myname 属性值改变为“极客时间”，变量环境如下所示：
VariableEnvironment:
myname -> " 极客时间 ",
showName ->function : {console.log(myname)
代码中出现相同的变量或者函数怎么办？
function showName() {
console.log('极客邦');
}
showName();
function showName() {
console.log('极客时间');
}
showName();
首先是编译阶段。遇到了第一个 showName 函数，会将该函数体存放到变量环境中。接 下来是第二个 showName 函数，继续存放至变量环境中，但是变量环境中已经存在一个 showName 函数了，此时，第二个 showName 函数会将第一个 showName 函数覆 盖掉。这样变量环境中就只存在第二个 showName 函数了。 接下来是执行阶段。先执行第一个 showName 函数，但由于是从变量环境中查找 showName 函数，而变量环境中只保存了第二个 showName 函数，所以最终调用的是 综上所述，一段代码如果定义了两个相同名字的函数，那么最终生效的是最后一个函数。 第二个函数，打印的内容是“极客时间”。第二次执行 showName 函数也是走同样的流 程，所以输出的结果也是“极客时间”。
总结
变量提升
所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分(用var声明的变量)和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值undefined。
代码的执行流程
当我们输入一段代码的时候会经过编译和执行2个阶段，代码在编译以后会分为执行上下文和可执行部分代码，执行上下文就是JavaScript 执行一段代码时的运行环境，它的作用就是确定在执行期间用到的诸如 this、变量、对象以及函数等。而执行上下文中又分为2个区域分别是变量环境和词法环境，其中变量环境是用过来存储变量提升的代码的。当JS遇到用var声明的变量会将变量放入环境变量中并赋值undefined，如果遇到函数声明会在变量环境中声明一个与函数名相同的属性执行函数存放的堆地址。执行阶段JavaScript 引擎开始执行“可执行代码”，按照顺序一行一行地执行。
