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。