徹底理解JavaScript作用域

• 2019 年 12 月 24 日
• 筆記

什麼是作用域？

　　幾乎所有程式語言就是在變數中存儲值，並且能讀取和修改此值。事實上，在變數中存儲值和取出值的能力，給程式賦予了狀態。 如果沒有這樣的概念，一個程式雖然可以執行一些任務，但是它們將會受到極大的限制而且不會非常有趣。 但是這些變數該存儲在哪，又給如何讀取？為了完成這個目標，需要制定一些規則，這個規則就是：作用域。

常見的作用域主要分為幾個類型：全局作用域、函數作用域、塊狀作用域、動態作用域。

如果一個 變數 或者其他表達式不在 「當前的作用域」，那麼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 等。