詳細解讀—函數和變量的聲明提升

一 - 聲明提升常見面試題

?我們先以幾道面試題開頭來引入，

?大家可以先給自己做出一個答案，然后再看文章的思路捋一捋喲。



來一道基礎的吧~



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；    

})()