js和其他语言一样，都要经历编译和执行阶段。而js在编译阶段的时候，会搜集所有的变量声明并且提前声明变量，而其他的语句都不会改变他们的顺序，因此，在编译阶段的时候，第一步就已经执行了，而第二步则是在执行阶段执行到该语句的时候才执行
也就是说，在编译的时候，页面上所有的变量都已经被声明了，但是都还没有赋值，即数据类型暂为undefined。
例1
a = 5
var a
console.log(a)
那么这里会打印出什么呢？按照正常的从上到下的逻辑思路，第2行的a并没有被定义，所以第四行打印a时应该会报错说 a is not defined，但是，注意注意，这里的a被提升了。
“变量提升会将当前作用域的所有变量的声明提升到程序的顶部”，意思就是说，虽然在第2行的a没有用关键字 var 定义，但是编译时会查找所有的var，把它们放到该作用域的最顶部，相当于以下的代码执行过程：
var a
a = 5
console.log(a)
例2
console.log(a)
a = 5
var a
是不是跟例1很像？只不过把赋值语句跟打印语句调换了一下位置。那么现在第2行的执行结果是打印出什么呢？结果是 undefined。回忆一下变量提升的操作，把所有的var都提到最顶部，在这里就是把 var a 放到最开头，接下来就是console.log(a)，很明显，这里的a还没被赋值，是在打印语句之后才被赋值，所以，已定义但未赋值的变量的数据类型是undefined，所以打印结果是undefined。
理解到简单的定义之后，就要思考一下相对比较复杂的变量提升了，我们结合函数来看看
第一种情况：函数有参数，且与函数内部的变量同名
function show(a){
console.log(a);//10
var a=20
console.log(a);//20
}
show(10)
开始学函数参数的时候，老师跟我们说，形参就相当于是在函数内部定义了一个变量，就是var 了一个变量；然后实参传进来就相当于是给这个变量赋了值。接下来我们就可以沿着这个思路去分析。还有一点：参数名和变量名同名，参数优先级高于变量提升
因为参数变量提升优先级高，所以在函数被调用后，参数传值的执行顺序是在变量赋值之前的，即var a之后，是 a = 10（传参），相当于以下的代码执行顺序：
function show(){
var a
a = 10
console.log(a);//10
a = 20
console.log(a);//20
}
show()
第二种情况：函数没有参数，函数内部的变量未以关键字 var 定义
function show(){
a=10 // 不加var，此处的a就变成了全局变量
console.log(a); //10
}
show()
console.log(a); //10
注意看第2行的a，它前面没有 var 关键字，此时，当show函数被调用后，a就被添加到了window对象中，成为了一个全局变量，全局变量在script的任何地方都能被访问，所以最后一行，在函数外部也能访问 a，结果打印10（如果前面没有调用show，即show（），那么a就没被创建，即未定义）
第三种情况：函数 有/无 参数，函数内部的变量以 var 定义
此时的var 后面的变量就是一个局部变量，也就是说，这个变量只能在其作用于内部被访问。
function show(){
var a=10
console.log(a); //10
}
show()
console.log(a);// a is not defined 局部变量 不能在外边被访问
第四种情况：函数外部的全局变量跟函数内部的局部变量同名
var tt = 'aa';
function test(){
alert(tt); //先变量提升，tt在全局和函数内部都有，优先考虑局部变量提升，所以var tt提到alert上面，即undefined
var tt = 'dd'; //局部变量赋值，所以tt现在有值了，为"dd""
alert(tt); //弹出dd
}
test();
当局部变量和全局变量都有提升时，优先考虑局部变量提升。
第五种情况：函数提升跟变量提升的变量重名
函数也是一个变量，可以用函数声明的方式定义，也可以用函数表达式的方式定义，所以也存在函数提升。
当有多个同名变量声明的时候，函数声明会覆盖其他的声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。
举个例子来解释一下：
fn()
function fn() {
console.log('1')
var fn = 40
console.log(fn)
}
function fn() {
console.log('2') //2
var fn = 10
console.log(fn) //10
}
var fn = function(){
console.log('3')
}
console.log(fn) //function(){console.log('3')}
在这里，第一行就先调用了函数fn。因为出现变量重名的情况时，函数声明高于所有变量声明，即函数声明最先实现，那么第3行和第9行的function fn就最先被声明，又因为如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明，所以第9行的fn会覆盖第3行的fn，相当于fn这个函数的函数主题就是第9行下边的内容。紧接着就是fn被调用（第一行），依次执行，输出结果打印2，10（局部变量）。然后执行到第14行的时候，因为变量提升，var fn 已经提到顶部去了，所以这里只剩下赋值语句 fn = function{console.log('3')}，相当于给fn赋了一个新的值，就跟 var a = 1； a = 5 是一个道理。此时打印fn，则输出的是这个新的函数内容 function{console.log('3')}。那么，如果在这后面再调用一次fn，会输出什么呢？结果是3。因为此时fn就是一个新的函数了，他的主体部分就是打印字符3。
网友评论