一次彻底搞清楚js中变量和函数（包括箭头函数）提升

做前端的同学肯定对变量提升和函数提升不陌生，但实际应用中依然会有出错的情况，前端时间组内成员review代码发现很多小d在这个问题上没有彻底弄清楚，本篇博文详细做一次刨析。

变量提升

首先看下这个问题：输出结果是什么？

var x =20;
function s()
{
console.log(x);
var x = 10;
console.log(x);return x;
}; 
s();

经测试输出结果应该;

undefined
10

为什么第一个console.log(x)会是undefined，其原因就是由于在函数s()内部发生了变量提升，虽然外部已经声名定义了x=20，但当调用函数s（）时内部变量x会首先覆盖外部全局变量x，同时将x局部变量提升，在函数第一句执行console.log(x)时因为此时x变量声明得到提升但并未赋值，所以报的是undefined，等运行到第二句var x = 10;后局部变量才有值。

验证下如果不声明 x

函数提升

函数作为js中的一等公民同样也存在函数提升的问题，看一下问题输出什么结果？

  y();
  function y() {
         alert(2);
     };
   x();
   var x = function() {
       alert(1);
   };

结果如下：

函数y如果一变量方式定义当变量提升时是无法调用的，如果直接function定义则会以函数提升的方式被调用。这也间接回答两种定义函数的区别，所以推荐方式就是定义变量（函数表达式）的方式。

猜下下面代码执行的结果：

    y();
　　　(function(){
        var x = function(){alert(0)}
     })();
     
     (function(){
         alert(2);
     }());
     
     !function(){
         alert(3);
     }();
	  function y() {
	     alert(2);
	   };
	 x();
	 var x = function() {
	     alert(1);
	 };

同样箭头函数也属于第二种（函数表达式定义）方式，必须先定义后使用。

综结

js程序的执行分为函数和变量的声明阶段 与 执行阶段 两个阶段

函数和变量的声明阶段 会先于 执行阶段 进行。
普通函数就是在声明阶段创建的。

箭头函数属于匿名函数，匿名函数是要通过赋值语句赋值给变量，这个赋值的过程是在代码执行阶段进行的，不是在声明阶段，所以没有函数声明提升的特性。