什么是作用域
程序的執行，離不開作用域，也必須在作用域中才能將代碼正確的執行。
所以作用域到底是什么，通俗的說，可以這樣理解：作用域就是定義變量的位置，是變量和函數的可訪問范圍，控制着變量和函數的可見性和生命周期。
而JavaScript中的作用域，在ES6之前和ES6之后，有兩種不同的情況。
ES6之前，JavaScript作用域有兩種：函數作用域和全局作用域。
ES6之后，JavaScript新增了塊級作用域。
作用域的特性
在JavaScript變量提升的討論中，我們其實是缺少了一個作用域的概念的，變量提升其實也是針對在同一作用域中的代碼來說的。
對編譯器的了解，讓我們明白，對於一段代碼【var a = 10】變量的賦值操作，其實是包含了兩個過程：
1、變量的聲明和隱式賦值（var a = undefined），這個階段在編譯時
2、變量的賦值（a = 10），這個階段在運行時
先看一下如下代碼：
var flag = true;
if(flag) {
var someStr = 'flag is true';
}
function doSomething() {
var someStr = 'in doSomething';
var otherStr = 'some other string';
console.log(someStr);
console.log(flag);
}
doSomething();
for(var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);
{
var place = 'i do not want to be visited';
}
那么這一些代碼在編譯之后，執行之前，根據變量提升的機制，我們可以知道應該是下面這個樣子：
function doSomething() { // 函數優先提升
// 提升隱式賦值
var someStr = undefined;
var otherStr = undefined;
someStr = 'in doSomething';
otherStr = 'some other string';
console.log(someStr);
console.log(flag);
}
// 隱式賦值和提升
var flag = undefined;
var someStr = undefined;
var i = undefined;
var place = undefined;
flag = true;
if(flag) {
someStr = 'flag is true';
}
for(i = 0; i < 10; i++) {
console.log(i);
}
doSomething();
console.log(i);
{
place = 'i do not want to be visited';
}
因為變量的提升特性，以及無塊級作用域的概念，所以代碼中在同一個作用域中變量和函數的定義，在編譯階段都會提升到頂部。
通過上述代碼，我們大體上可以得出作用域的特性：
第一、內部作用域和外部作用域是嵌套關系。外部作用域完全包含內部作用域。
第二、內部作用域可訪問外部作用域的變量，但是外部作用域不能訪問內部作用域的變量，（鏈式繼承，向上部作用域查找）。
第三、變量提升是在同一個作用域內部出現的。
第四、作用域用於編譯器在編譯代碼時候，確定變量和函數聲明的位置。
塊級作用域
上述代碼，在ES6+的環境中運行，也是和ES6之前是相同的結果，但是ES6不是引用了塊級作用域嗎，為什么大括號塊內的代碼還是會出現和之前一樣的編譯方式呢？
那么，ES6中的塊級作用域到底是什么？
let & const
利用var定義的變量，具有提升的性質，可能會影響代碼的執行結果。
這是var定義變量的缺陷，那么如何規避這種缺陷呢？在ES6中，設計出來了let和const來重新定變量。
但是，由於JavaScript標准定義的非常早，1995年5月JavaScript方案定義，1996年微軟提供了JavaScript解決方案JScript。而網景公司為了同微軟競爭，神情了JavaScript標准，於是，1997年6月第一個國際標准ECMA-262便頒布了。
C語言標准化的過程卻是將近二十年后才頒布。
所以，我們以后設計的語言既要兼容var也要有自己的塊級作用域，讓var和let以及const在引擎做到兼容。
所以，我們定義塊級作用域的標准，只能從定義變量的方式入手，而不是直接一個{}塊就可以解決。
先讓我們看一下下面代碼：
var name = 'someName';
function doSomething(){
console.log(name);
if(true) {
var name = 'otherName';
}
}
doSomething();
結果：undefined
產生這個結果的原因是我們函數內部的變量提升，覆蓋了外部作用域的變量，也就是說，其實打印出來的值是doSomething函數中的變量聲明的值。
但是這樣卻並不符合塊級作用域的預期，如果有許多類似代碼，理解起來也會相當困難。如果將代碼用ES6方式改寫：
let name = 'someName';
function doSomething(){
console.log(name);
if(true) {
let name = 'otherName';
}
}
doSomething();
結果：'someName'
從運行結果看，我們真正的做到了塊級作用域應該有的效果，那么let和const又是如何支持塊作用域的呢？
執行上下文
先想想一下JavaScript中的一個作用域兩個執行上下文中的編譯過程中的環境：
變量環境：編譯階段var聲明存放的位置（一個大對象）。
詞法環境：我們代碼書寫的位置，也是let和const的初始化位置（代碼按詞法環境順序執行，按照{}划分的棧結構）。
而在編譯階段，我們將var定義的變量全都在編譯過程在變量環境初始化為undefined，但是用let和const定義的變量，其實他們並未在變量環境初始化，而是在詞法環境初始化，也就是執行代碼位置初始化。
詞法環境的特點：按照{}划分的一個棧結構。
變量查找方式
JavaScript中變量查找的方式：沿着詞法環境的棧頂向下查找，找不到的變量去變量環境中查找，這樣就形成了先查找代碼塊中的變量，再查找提升之后的變量環境，這樣就形成了塊級作用域的概念。
上面的代碼形成兩種環境的情況如下：
一、全局環境的執行上下文
變量環境：函數聲明function doSomething() { ... }
詞法環境棧：執行到let name = 'someName';讓語句name = 'someName'入棧。
二、doSomething的執行上下文（被全局環境包裹）
變量環境：無
詞法環境棧情況：執行到let name = 'otherName',語句的時候，name = 'other'才會入棧；
JavaScript代碼執行方式
執行doSomething的時候，還未執行let name = 'otherName',所以，此時doSomething的詞法環境中並未有name = 'otherName'，這個時候查找，只能向外部作用域查找（全局作用域）
此時查找到全局作用域name = 'someName'所以此時就打印了someName
代碼接着執行到了if語句內部，才會將name = 'otherName'入棧，但是此時因為語句已經執行完畢，所以也就無關痛癢了。
JavaScript也就通過這種方式，實現了塊級別作用域。
總結
JavaScript中的作用域總的來說，分為塊級作用域、函數作用域、全局作用域。
而每個作用域都會創建自身的執行上下文，每一個執行上下文又分為了變量環境和詞法環境兩部分。
塊級作用域的實現，其實是根據定義的let和const聲明的變量放置在詞法環境棧中這一特性來實現。
這一特性被社區的人叫做‘暫時性死區’，但是在JavaScript標准中並未有這個概念。
只有理解了作用域的概念，才能真正明白JavaScript的執行機制，才能減少我們因為變量定義等發生的錯誤。