详解函数和变量的声明提升

详细解读—函数和变量的声明提升

一 - 声明提升常见面试题

☛我们先以几道面试题开头来引入，
☛大家可以先给自己做出一个答案，然后再看文章的思路捋一捋哟。

来一道基础的吧~

var a="Hello";  
function test(){  
  alert(a); 
  var a="World";
  alert(a);
}
test();

难度+1

var a = 1;
function outer(){ 
  a = 2; 
  function inner(){       
      alert(a); 
      a = 4; 
  } 
  inner();
} 
outer(); 
alert(a);

继续加油

(function(){
  f1(); 
  f2();
  var f1 = function(){};
  function f2(){
      alert(1);
  }
})();

最后一道

(function () {
   console.log(a);
   var a=1;
   function a() {
       console.log("biu~");
   }
})()

二 - 究竟什么是声明提升？

• 引擎在解释JS代码之前，首先要对JS代码进行编译，其中编译的一部分工作就是找到所有的声明，包括变量和函数的所有声明都会在任何代码被执行前首先被处理。
• var a = 1这句话会被浏览器读成 var a和a = 1两句话执行，其中var a会在编译阶段就先执行了，而a = 1这段赋值代码会在原地等待执行阶段。

console.log(a); 
var a = 2;

上边这段代码，如果代码按照顺序由上自下执行，那么执行到console.log(a);时，a还没有声明,所以会包一个找不到变量a的错，但是事实上，这句话打印了一个undefined，说明a被声明了，但是没有被赋值，那么结合上一段的文字，我们可以得出代码实际运行的是这样的：

var a;
console.log(a);
a = 2;

三 - 函数的提升

大家可能在书写代码的时候发现，无论函数封装写在前或者后，我们的函数调用都可以顺利执行。

fn1();//可以执行
function fn1() {
    console.log("hello");
}

为什么呢？其实函数声明,包括函数的代码块都i会被提升，所以调用函数的时候，函数声明已经被执行过了。

但是有个案例大家了解一下：

fn2();//报错，fn2不是一个函数
var fn2 = function () {
   console.log("world");
}

我们可以看到 以给匿名函数赋值的形式定义函数，只会提升函数声明，但是函数表达式却不会被提升。因为变量fn2被提升,但是并没有赋值，我们书写的fn2()无法运行，而抛出了异常。
以下就是实际执行的顺序：

var fn2;
fn2();
fn2 = function () {
   console.log("world")
}

函数优先提升
我们都知道了，函数声明和变量声明都会被提升，那么遇到这样的情况会怎么办？

fn3();
var fn3=function () {
    console.log("fn3-1");
}
fn3();
function fn3() {
    console.log("fn3-2");
}

哎呦，嘛情况，突然迷了！！！
☛ 这个时候你就要考虑，同样的一个变量名称，到底是把var fn3给先提声上去，再提升 fn3函数体？还是先提升 fn3函数体，再提升var fn3？？？其实都不对！！！

☛ 答案是：函数会被优先提升，但后才是变量提升，但是当函数提升后，然后发现还有一个变量声明和函数声明一样的名称，这个就是重复声明，那么这个var fn3 是不生效直接忽略的。

所以实际代码运行顺序是：

function fn3() {
   console.log("fn3-2");
}
fn3();//fn3-2
fn3=function () {//var fn3因为重复声明被忽略
   console.log("fn3-1");
}
fn3();//fn3-1

当然，我们还是建议再同一个作用域重复声明是很烂的选择

说在最后
再代码作用域中的声明，都会在代码执行前被首先处理，所有的声明都会被移动到各自作用域的最顶端，这个过程就叫做声明提升。

四 - 答案：

问题1：

var a="Hello";  
function test(){  
  alert(a); 
  var a="World";
  alert(a);
}
test();

实际执行：
var a="Hello";
function test(){
   //作用域有声明a，声明提升到这里
   var a;
   alert(a);//本作用域声明a，所以不去使用父作用域的a，但是本作用域的a没有赋值，所以弹出undefined
   a="World";
   alert(a);//赋值后 ，弹出world
}
test();

问题2：

var a = 1;
function outer(){ 
  a = 2; 
  function inner(){       
      alert(a); 
      a = 4; 
  } 
  inner();
} 
outer(); 
alert(a);

执行结果：

var a = 1;
function outer(){
   a = 2;
   function inner(){
       //本作用域没有声明a，所以没有任何提升，直接执行
       alert(a); // 所以弹出 a为 2
       a = 4;
   }
   inner();
}
outer();
alert(a);//只有全局声明了a，所以所有作用域使用的都是全局的a，所以a最后被赋值为4 弹出4

问题3

(function(){
  f1(); 
  f2();
  var f1 = function(){};
  function f2(){
      alert(1);
  }
})();
实际执行结果：

(function(){
   function f2(){
       alert(1);
   }
   var fn1;
   f1();//提升后先执行fn1(),但是fn1被提升的是变量不是函数，所以这里报错，不是一个函数
   f2();//上一句话报错，这句话不再运行
   f1 = function(){};
})();

问题4：

(function () {
   console.log(a);
   var a=1;
   function a() {
       console.log("biu~");
   }
})()
实际执行结果：

(function () {
   function a() {
       console.log("biu~");
   }
   console.log(a);//打印了a这个函数的函数体
   a=1;//因为函数有限声明提升，所以这里的var a被提升时，发现重复声明，故被忽略了var a；    
})()