先看個小例子

function fn(){
     console.log(a);//undefined;
     var a = 1;
}
fn();

為什麼打印出來的是 undefined 呢？

執行上下文概念

　　當代碼執行時，會產生一個對應的執行環境，在這個環境中，所有變數會被事先提出來（變數提升），有的直接賦值，有的為預設值 undefined，程式碼從上往下開始執行，就叫做執行上下文。

　　在 JavaScript 的世界裡，執行環境有三種，分別是：

　　　　1.全域性環境：程式碼首先進入的環境

　　　　2.函式環境：函式被呼叫時執行的環境

　　　　3.eval函式：https://www.cnblogs.com/chaoguo1234/p/5384745.html

執行上下文特點

　　1.單執行緒，在主程序上執行

　　2.同步執行，從上往下按順序執行

　　3.全域性上下文只有一個，瀏覽器關閉時會被彈出棧

　　4.函式的執行上下文沒有數目限制

　　5.函式每被呼叫一次，都會產生一個新的執行上下文環境

執行上下文棧

　　執行全域性程式碼時，會產生一個執行上下文環境，每次呼叫函式都又會產生執行上下文環境。當函式呼叫完成時，這個上下文環境以及其中的資料都會被消除，再重新回到全域性上下文環境。處於活動狀態的執行上下文環境只有一個。

　　其實這是一個壓棧出棧的過程——執行上下文棧。

var                                  // 1.進入全域性上下文環境
    a = 10,
    fn,
    bar = function(x){
        var b = 20;
        fn(x + b);               // 3.進入fn上下文環境
    }

fn = function(y){
    var c = 20;
    console.log(y + c);    
}

bar(5);                              // 2.進入bar上下文環境

執行上下文生命週期

　　如圖所示，執行上下文共分3個階段，分別是：

　　　　1.建立階段

　　　　　　(1).生成變數物件

　　　　　　(2).建立作用域鏈

　　　　　　(3).確定 this 指向

　　　　2.執行階段

　　　　　　(1).變數賦值

　　　　　　(2).函式引用

　　　　　　(3).執行其他程式碼

　　　　3.銷燬階段

　　　　　　執行完畢出棧，等待回收被銷燬

　　所以上面小例子等同於：

function fn(){
    var a;
    console.log(a);
    a = 1;    
}

fn();