JS变量的提升详解

此次说明的是var与function的变量提升

　　　　那么先看一段代码

 1 <script type="text/javascript">
 2 
 3 　　console.log(test);
 4 　　var test = function(){
 5 　　console.log(1);
 6 　　}
 7 　　function test(){
 8 　　console.log(2);
 9 　　}
10 　　console.log(test);
11 
12 </script>

　　执行如上代码会产生什么结果呢？

　　正确结果是输出

　　ƒ test(){
　　console.log(2);
　　}

　　ƒ (){
　　console.log(1);
　　}

　　为什么不是 1 2 ？或者 2 1？

　　这里需要说一个和变量提升无关的（敲黑板！！！）

　　console.log（text）是在控制台输出的text是一个函数体

　　因为执行函数是 text() 而输出 text 则是输出text这个函数体，它并没有执行。

-------------------------------------------------------------华丽的分割线--------------------------------------------------------------------------

　　好了，那么我们来看一下函数的具体执行顺序。

　　我们都知道var与function会进行一个变量的提升，但是当var与function冲突的时候他们提升的一个优先顺序又是怎么样的呢？

 1 <script type="text/javascript">
 2 
 3     var test;           //实验证明当var和function冲突时计算机会先解析function，由此我们可以假设在冲突时，
　　　　　　　　　　　　　　　　　 var会先进行一个提升（也就是排在最上面） 但只提升了var声明的变量，var test具体的内容还在下面（第11行）等待赋值。
 4 
 5     function test(){    //function会排在var的下面，这样解析时可以理解为下面的function覆盖了之前的var。
 6         console.log(2);
 7     }
 8     
 9     console.log(test);  //此时解析到的test就是函数体——function(){console.log(2);}   因为之前的var被覆盖了。

10 
11     test = function(){  //这里再次对test进行一个赋值，又覆盖掉了上面的（第5行）function。（此时之前声明的var test终于等到了他想要的人...）
12         console.log(1);
13     }
14     
15     console.log(test);  //再次输出的就是已经被覆盖的函数——function(){console.log(1);}

相关推荐