概述
Javascript中的作用域和上下文的實現是Javascript語言獨有的特性，從某種程度上來說，Javascript語言是十分靈活的。Javascript中的函數可以采用各種各樣的上下文，作用域也可以被封裝和保存。正是由於這些特性，Javascript中也提供了很多很有用的設計模式。然而，作用域和上下文也是Javascript程序員在開發中經常迷惑的地方。
下面會向大家介紹Javascript中作用域和上下文的概念，以及它們的不同。
作用域 VS 上下文
首先要說明的很重要的一點是作用域和上下文並不是同一個概念，它們指代的並不是同一個東西。作為一個前端的菜逼，經常會看到一些文章把這兩個概念弄混，結果有些東西越看越不明白。這兩個概念貌似被混淆了很長一段時間了。因此，查了很多資料，簡單說明下這兩個概念。:stuck_out_tongue_closed_eyes:
在Javascript中，當一個函數被調用時都會有一個作用域和上下文和這個函數綁定在一起。從根本上來說，作用域是基於函數的而上下文是基於對象的。換句話說，作用域適用於函數被調用時函數中變量的訪問權限。上下文通常是指“this”關鍵字的值，“this”是擁有當前執行代碼的對象的引用。
變量作用域
變量可以被定義在局域或全局作用域中，分別稱為局部變量和全局變量。全局變量是指在函數體外聲明的變量，在程序的任何地方都可以訪問全局變量。局部變量是指在函數體內定義的變量，它僅可以在函數體內或者嵌套的函數內被訪問，並且不能在函數外部被訪問。
Javascript目前並不支持塊級作用域(在if、switch、for等語句中定義的變量)。這意味著在塊內定義的變量，在塊外也可以訪問。但是，在ES6中，我們可以使用“let”關鍵字定義塊級作用域。
關於作用域的內容，大家可以查下別的資料，這部分內容相對簡單些。
“this”上下文
上下文(context)通常取決於函數被調用的方式。當函數作為對象的方法被調用時，“this”指代的是調用該函數的對象。
復制代碼 代碼如下:
var obj={
foo:function (){
console.log(this === obj);
}
};
obj.foo(); //輸出true
同樣，當我們使用“new”關鍵字創建新對象時，this引用的是新創建的對象。
復制代碼 代碼如下:
function foo(){
console.log(this);
}
foo(); //輸出window
var obj=new foo(); //輸出 foo {}
有一點需要注意的是，當全局作用域中的函數被被調用時，this引用的是全局對象，在浏覽器環境中指的就是window。但是，如果在嚴格模式下運行代碼時，“this”被設置為“undefined”
執行上下文(Execution Context)
Javascript是單線程的語言，這也就是說Javascript在浏覽器中運行時，一次只能做一件事情，其他的事情將被方法隊列中，等待被處理。
1.當Javascript代碼文件被浏覽器載入後，默認最新進入的是一個全局的執行上下文。當在全局上下文中調用一個函數時，程序留就進入該被調用函數內，此時Javascript引擎就會為該函數創建一個新的執行上下文，並且將其壓入到執行上下文堆棧的頂部。浏覽器總是執行當前在堆棧頂部的上下文，一旦執行完畢，該上下文就會從堆棧頂部被彈出，然後，進入其下的上下文執行代碼。這樣，堆棧中的上下文就會被依次執行並且彈出堆棧，直到回到全局的上下文。
2.一個執行上下文可以被分為兩個階段：創建階段和執行階段。在創建階段，javascript解釋器首先會創建一個變量對象(也成為“活動對象”，activation object)。活動對象由變量，函數聲明和參數組成。在這個階段，函數的作用域鏈被初始化，this引用的對象也被確定。接下來就是執行階段，在這個階段，代碼被解釋並執行。
在Javascript代碼中，可以有任意多個函數上下文，我們已經知道，當函數被調用時，Javascript解釋器就會創建一個新的上下文，同時會創建一個私有的作用域，函數內部聲明的任何變量都不能在當前函數作用域外部直接訪問。
3.通過上面的解釋，我們對函數的“執行上下文”有了一個基本的概念，但是這裡也是大家最容易迷惑的一個地方。Javascript中的“執行上下文”主要是指作用域，而不是上面第四小節中指的“this上下文”。類似的容易混淆的概念在Javascript中還有很多，但是我們只要弄清楚了每個概念所指代的具體對象，就不會再迷惑，因此，這裡也希望大家能夠真正的區分開“執行上下文”和“this上下文”。
簡單的一句話概括來說，執行上下文是與作用域相關的概念，雖然這樣說可能不太嚴謹。
作用域鏈
對每一個執行上下文來說，都有一個作用域連跟它綁定在一起。作用域鏈包含了執行上下文堆棧中的執行上下文活動對象(activation object，聽起來有點繞口)。作用域鏈決定了變量的訪問和標識符的解析。
代碼示例：
復制代碼 代碼如下:
function first(){
second();
function second(){
third();
function third(){
fourth();
function fourth(){
//代碼
}
}
}
}
first();
執行上面的代碼，嵌套的函數都會被執行。就上面的代碼來說，也會形成一個作用域鏈，作用域鏈從頂部到底部的順序為：fourth, third, second, first, global。函數fourth可以訪問全局作用域中的變量，並且可以訪問函數third, second, first中定義的任何變量。
有一點需要注意的是，在函數體內，局部變量的優先級高於同名的全局變量。如果在函數內聲明的局部變量或函數參數中帶有的變量和全局變量重名，那麼全局變量就被局部變量所覆蓋。
簡單來說，每次我們嘗試訪問一個變量時，程序都會在當前函數作用域內查找變量，如果找不到就沿著作用域鏈到該函數的上層去查找，直到找到該變量為止，如果找不到則返回undefined。
總結
這篇文章介紹了javascript中上下文和作用域的相關概念，javascript中還有幾個比較重要的概念，如閉包等，這些在以後自己弄明白了會寫成文章～～