什麼是作用域？
幾乎所有程式設計語言就是在變量中存儲值，并且能讀取和修改此值。事實上，在變量中存儲值和取出值的能力，給程式賦予了狀态。
如果沒有這樣的概念，一個程式雖然可以執行一些任務，但是它們将會受到極大的限制而且不會非常有趣。
但是這些變量該存儲在哪，又給如何讀取？為了完成這個目标，需要制定一些規則，這個規則就是：作用域。
常見的作用域主要分為幾個類型：全局作用域、函數作用域、塊狀作用域、動态作用域。
| 對象 | 類型 |
| global window | 全局作用域 |
| function | 函數作用域(局部作用域) |
| {} | 塊狀作用域 |
| this | 動态作用域 |
如果一個 變量 或者其他表達式不在 “目前的作用域”，那麼JavaScript機制會繼續沿着作用域鍊上查找直到全局作用域（global或浏覽器中的window）如果找不到将不可被使用。 作用域也可以根據代碼層次分層，以便子作用域可以通路父作用域，通常是指沿着鍊式的作用域鍊查找，而不能從父作用域引用子作用域中的變量和引用
變量在函數或者代碼塊
{}
外定義，即為全局作用域。不過，在函數或者代碼塊
{}
内未定義的變量也是擁有全局作用域的（不推薦）。
var carName = " Volvo"; // 此處可調用
carName 變量
function myFunction() { // 函數内可調用 carName 變量 } 上述代碼中變量
carName
就是在函數外定義的，它是擁有全局作用域的。這個變量可以在任意地方被讀取或者修改，當然如果變量在函數内沒有聲明（沒有使用 var 關鍵字），該變量依然為全局變量。
此處可調用 carName 變量 function myFunction() { carName = "Volvo"; // 此處可調用 carName 變量 }
在函數内部或代碼塊中沒有定義的變量實際上是作為 window/global 的屬性存在，而不是全局變量。換句話說沒有使用 var 定義的變量雖然擁有全局作用域，但是它是可以被 delete 的，而全局變量不可以。
函數作用域
在函數内部定義的變量，就是局部作用域。函數作用域内，對外是封閉的，從外層的作用域無法直接通路函數内部的作用域！
function bar() {
var testValue = 'inner';
}
console.log(testValue); // 報錯：ReferenceError: testValue is not defined 如果想讀取函數内的變量，必須借助 return 或者閉包。
function bar(value) {
var testValue = 'inner';
return testValue + value;
}
console.log(bar('fun')); // "innerfun" 這是借助 return 的方式，下面是閉包的方式：
function bar(value) {
var testValue = 'inner';
var rusult = testValue + value;
function innser() {
return rusult;
};
return innser();
}
console.log(bar('fun')); // "innerfun" 通俗的講，return 是函數對外交流的出口，而 return 可以傳回的是函數，根據作用域的規則，函數内部的子函數是可以擷取函數作用域内的變量的。
說到這其實大家會想到嵌套函數的作用域問題，如果 inner 函數再嵌套函數呢？這就涉及到另一個概念：作用域鍊。
仔細觀察上圖，其實不難了解作用域鍊是什麼，因為你可以按照原型鍊那樣去了解。任何一個作用域鍊都是一個堆棧，首先先把全局作用域壓入棧底，再按照函數的嵌套關系一次壓入堆棧。在執行的時候就按照這個作用域鍊尋找變量。
在其他程式設計語言中，塊狀作用域是很熟悉的概念，但是在JavaScript中不被支援，就像上述知識一樣，除了全局作用域就是函數作用域，一直沒有自己的塊狀作用域。在 ES6 中已經改變了這個現象，塊狀作用域得到普及。關于什麼是塊，隻要認識
{}
就可以了。
if(true){
let a = 1
console.log(a)
} 在這個代碼中，
if 後 {}
就是“塊”，這個裡面的變量就是擁有這個塊狀作用域，按照規則，
{}
之外是無法通路這個變量的。
在 JavaScript 中很多同學對 this 的指向時而清楚時而模糊，其實結合作用域會對 this 有一個清晰的了解。不妨先來看下這段代碼：
window.a = 3
function test () {
console.log(this.a)
}
test.bind({ a: 2 })() // 2
test() // 3 在這裡 bind 已經把作用域的範圍進行了修改指向了
{ a: 2 }
，而 this 指向的是目前作用域對象，是不是可以清楚的了解了呢？
接下來我們再思考另一個問題：作用域是在代碼編寫的時候就已經決定了呢，還是在代碼執行的過程中才決定的？
var carName = " Volvo";
// 此處可調用 carName 變量
function myFunction() {
// 函數内可調用 carName 變量
} 在看看這段代碼，寫代碼的時候就知道 carName 就是全局作用域，函數内部的用 var 定義的變量就是函數作用域。這個也就是專業術語：詞法作用域。
通俗的講變量的作用域是在定義時決定而不是執行時決定，也就是說詞法作用域取決于源碼，通過靜态分析就能确定，是以詞法作用域也叫做靜态作用域。
相反，隻能在執行階段才能決定變量的作用域，那就是動态作用域。
看看下面的代碼是遵循了動态作用域還是靜态作用域呢？
function foo() {
console.log(a); // 2 (不是 3!)
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
為什麼會這樣？
如果按照動态作用域分析：當 foo() 不能為 a 解析出一個變量引用時，它不會沿着嵌套的作用域鍊向上走一層，而是沿着調用棧向上走，以找到 foo() 是 從何處 被調用的。因為 foo() 是從 bar() 中被調用的，它就會在 bar() 的作用域中檢查變量，并且在這裡找到持有值 3 的 a。
如果按照靜态作用域分析：foo執行的時候沒有找到 a 這個變量，它會按照代碼書寫的順序往上找，也就是 foo 定義的外層，就找到了 var a=2 ，而不是 foo 調用的 bar 内找。
是以結果就是 2。
從這個示例可以看出 JavaScript 預設采用詞法（靜态）作用域，如果要開啟動态作用域請借助 bind、with、eval 等。