先来看一段代码

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

思考一下它的输出

为什么myname在声明之前就可以输出到控制台=>这就是因为变量提升

上面的代码等价于下边的代码

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

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

js代码执行前会进行编译（变量提升也就在这个阶段发生）

注意

思考题1

function showName() {
    console.log('极客邦');
}
showName();
function showName() {
    console.log('极客时间');
}
showName(); 

分析一下执行过程

• 首先是编译阶段。遇到了第一个 showName 函数，会将该函数体存放到变量环境中。接下来是第二个 showName 函数，继续存放至变量环境中，但是变量环境中已经存在一个 showName 函数了，此时，第二个 showName 函数会将第一个 showName 函数覆盖掉。这样变量环境中就只存在第二个 showName 函数了。
• 接下来是执行阶段。先执行第一个 showName 函数，但由于是从变量环境中查找 showName 函数，而变量环境中只保存了第二个 showName 函数，所以最终调用的是第二个函数，打印的内容是“极客时间”。第二次执行 showName 函数也是走同样的流程，所以输出的结果也是“极客时间”。

思考题2

showName()
var showName = function() {
    console.log(2)
}
function showName() {
    console.log(1)
}

分析一下执行过程

• 编译阶段:
  var showName = undefined
  function showName(){console.log(1)}

• 执行阶段:
  showName()//输出1
  showName=function(){console.log(2)}
  //如果后面再有showName执行的话，就输出2因为这时候函数引用已经变了