变量声明提升与函数表达式
在刷题准备腾讯前端实习生面试题时发现这样一道与变量提升有关的题目,如果不加注意很容易掉入坑中。
题目如下:
1 var fun = function (){ console.log(1);}; 2 function fun(){ console.log(2);}; 3 fun(); //1
问输出为多少?
此题有两个坑,一是变量声明提升,二是函数表达式。变量声明提升即所有声明变量或声明函数都会被提升到当前函数的顶部。例如以下代码:
1 console.log('x' in window);//true 2 var x; 3 x=0;
代码执行时javascript引擎会将变量声明提升至代码最上方:
1 var x; 2 console.log('x' in window);//true
3 x=0;
对于函数表达式最大的问题在于javascropt会将此代码拆分为两行代码分别执行。例如以下代码:
1 console.log(x);//function x(){} 2 var x=1; 3 function x(){};
实际在代码执行时,先将var x=1拆分为 var x;和 x=1;两行,再将var x;和 function x(){}两行提升至最上方变成:
1 var x; 2 function x(){} 3 console.log(x); 4 x=1;
所以最终函数声明的x覆盖了变量声明的x,输出为x的函数。同理,原题中代码最终执行时顺序为:
1 var fun;//只提升变量声明 2 function fun(){console.log(2);}//提升函数声明,覆盖了变量声明 3 fun = function(){console.log(1);}//最终的赋值再次覆盖了函数声明 4 fun();//1
浙公网安备 33010602011771号