摘要：輸出的結果為輸出的結果為提升后輸出的結果為重新定義了變量輸出的結果為如果定義了相同的函數變量聲明，后定義的聲明會覆蓋掉先前的聲明，看如下代碼輸出練習的值是多少的值是多少第二題的解析請看這里參考資料文章文章中文版鏈接文章推薦文章變量提升

原文鏈接

先來看個例子：

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

為什么是這樣的結果呢？這是因為 JavaScript 代碼在執行之前會有一個 預解析 階段，在這個階段，解釋器會將所有 變量聲明 和 函數聲明 提升到他們各自的作用域頂部。

注：變量聲明提升只是預解析階段的一部分行為！

如果變量在函數體內聲明，它的作用域是函數作用域（function-level scope）。否則，它就是全局作用域。

繼續上面的例子，因為這個預解析階段，上面的代碼會被解釋器預解析成下面的代碼：

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

在 ES6 之前，通常通過 var 來聲明一個變量，但是 ES6 發布后，又新添了2個關鍵字來聲明一個變量：let 和 const。

var 聲明了一個變量，這個變量的作用域是當前執行位置的上下文：一個函數的內部（聲明在函數內）或者全局（聲明在函數外）

let 聲明了一個塊級域的局部變量，并且它聲明的變量只在所在的代碼塊內有效

const 聲明了一個只讀的塊級域的常量，并且它聲明的常量也只在所在的代碼塊內有效

{ // 代碼塊
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a);   // 1
  console.log(b);   // 2
  console.log(c);   // 3
}

console.log(a);   // 1
console.log(b);   // 報錯，ReferenceError: b is not defined(…)
console.log(c);   // 未執行， 因為上面語句出錯，所以這條語句不再執行，如果上面的語句不報錯，那么這里就會報錯

(function (){
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a);   // 1
  console.log(b);   // 2
  console.log(c);   // 3
})();   // 為了方便，這里使用了自執行函數

console.log(a);   // 報錯，ReferenceError: a is not defined(…)
console.log(b);   // 未執行
console.log(c);   // 未執行

let const 不像 var 那樣會發生“變量提升”現象。

console.log(a);    // 報錯，ReferenceError: a is not defined
let a = 2;
console.log(a);    // 待執行

console.log(a);    // 報錯，ReferenceError: a is not defined
const a = 2;
console.log(a);    // 待執行

ES6明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。

提升（hoisting）影響了變量的生命周期，一個變量的生命周期包含3個階段：
聲明 - 創建一個新變量，例如 var myValue

初始化 - 用一個值初始化變量 例如 myValue = 150

使用 - 使用變量的值 例如 alert(myValue)


當代碼按照這三個步驟的順序執行的時候，一切看起來都很簡單，自然。

變量提升的部分只是變量的聲明，賦值語句和可執行的代碼邏輯還保持在原地不動

console.log(a);     // undefined
var a = 111;
function fun(){
  console.log(a);   // undefined
  var a = 222;
  console.log(a);   // 222
}
fun();
console.log(a);     // 111

// --------------
//變量提升后

function fun(){
  var a;
  console.log(a);   // undefined
  a = 222;
  console.log(a);   // 222
}
var a;
console.log(a);     // undefined
a = 111;
fun();
console.log(a);     // 111

在基本的語句（或者說代碼塊）中（比如：if語句、for語句、while語句、switch語句、for...in語句等），不存在變量聲明提升

var a = "aaa";
{
  console.log(a);       // aaa
  var a = "bbb";
}
console.log(a);         // bbb

//---------------

var a = "aaa";
if (true) {
  console.log(a);       // aaa
  var a = "bbb";
}
console.log(a);         // bbb

//---------------

var a = "aaa";
for(let x in window){
  console.log(a);       // aaa
  var a = "bbb";
  break;
}
console.log(a);         // bbb

函數聲明（function declarations） 和 函數表達式（function expressions）在語法上其實是等價的，但是有一點不同，就是 JavaScript 引擎 加載他們的方式不一樣。簡單講，就是函數聲明會被提升到其作用域頂部，而函數表達式不會。
更多細節

函數聲明會提升，但是函數表達式的函數體就不會提升了

fun();       // hello 

function fun(){
  console.log("hello");
}

// --------------
// 提升后

function fun(){
  console.log("hello");
}

fun();       // hello 

fun();       // 報錯，TypeError: fun is not a function

var fun = function(){
  console.log("hello");
};

// --------------
// 提升后

var fun;

fun();        // 報錯，TypeError: fun is not a function

fun = function(){
  console.log("hello");
};

當函數表達式的函數不再是匿名函數，而是一個有函數名的函數時，會發生什么？

foo();  // 報錯，TypeError "foo is not a function"
bar();  // 有效的
baz();  // 報錯，TypeError "baz is not a function"
spam(); // 報錯，ReferenceError "spam is not defined"

// anonymous function expression ("foo" gets hoisted)
var foo = function () {};     

// function declaration ("bar" and the function body get hoisted)
function bar() {}; 

// named function expression (only "baz" gets hoisted)
var baz = function spam() {}; 

foo(); // 有效的
bar(); // 有效的
baz(); // 有效的
spam(); // 報錯，ReferenceError "spam is not defined"

如果一個變量和函數同名，函數聲明優先于變量聲明（畢竟函數是 JavaScript 的第一等公民），并且與函數名同名的變量聲明將會被忽略。

fun();    // 輸出的結果為111
function fun(){
  console.log(111);
}
var fun = function(){
  console.log(222);
}
fun();    // 輸出的結果為222 

// --------------
// 提升后

function fun(){
  console.log(111);
}
fun();    // 輸出的結果為111
fun = function(){       // 重新定義了變量 fun
  console.log(222);
}
fun();    // 輸出的結果為222 

如果定義了相同的函數變量聲明，后定義的聲明會覆蓋掉先前的聲明，看如下代碼：

foo();    //輸出3
function foo(){
  console.log(1);
}
var foo = function(){
  console.log(2);
}  
function foo(){
  console.log(3);
} 

alert(foo) 的值是多少？

var foo = 1;
function bar() {
    if (!foo) {
        var foo = 10;
    }
    alert(foo); // ?
}
bar();

alert(a) 的值是多少？

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);  // ?

第二題的解析請看 這里

【文章】Variable and Function Hoisting in JavaScript

【文章】JavaScript variables hoisting in details（中文版鏈接）

【文章】JavaScript Scoping and Hoisting（推薦）

【文章】JavaScript變量提升