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

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

一 - 聲明提升常見面試題

☛我們先以幾道面試題開頭來引入，
☛大家可以先給自己做出一個答案，然後再看文章的思路捋一捋喲。

來一道基礎的吧~

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；    
})()