Javascript 的作用域 (Scope) 與作用域鏈 (Scope Chain) 是什麼?

什麼是作用域 (Scope) ?

作用域顧名思義，就是指有作用的範圍，在 JavaScript 當中，有作用是指可以被使用、被索引。因此一個值 (value)，或者一個表達式 (expression) 可以被使用與索引的範圍，會被稱為作用域。要正式一點說的話，根據 MDN 的解釋，作用域是當前的執行上下文 (current execution context)，值 (value) 或是表達式 (expression) 可以在該執行上下文被訪問；換言之，如果有一個變數或表達式不在當前的作用域中，那麼它是不可以被使用的。

JavaScript 的作用域分為三種：

• 全域 (Global Scope)：當 JavaScript 程式碼被執行一開始時，就會創建一個全域執行環境，被定義在函式或塊級以外的變數，就會屬於全局作用域，這些變數也被稱之為全域變數 (Global variable)，在程式碼中的任何地方都能被使用到。以下例子的 a 值就是在全局作用域的全域變數。

  var a = '全局作用域';
  
  function call() {
    console.log(a); // 全局作用域
    a = '哈囉全局作用域~~';
  }
  call();
  console.log(a); // 哈囉全局作用域~~
  

• 函式作用域 (Function Scope)：由函式所創建的作用域

  function scope() {
    let a = '函式作用域';
    console.log(a); // 函式作用域
  }
  // a 在此處不可用，因為 a 是函式作用域
  

• 塊級作用域 (Block Scope)：ES6 之後才出現，被定義在一個塊級中，如下面例子，在 if else 判斷式中，就屬於塊級作用域。要注意的是，只有 let 和 const 定義的變數會屬於塊級作用域，如果是 var 定義的變數會是只有函式作用域。

  function checkScope() {
    if (true) {
      let a = '塊級作用域';
      var b = '函式作用域';
    } else {
      // a 變數屬於 if 判斷式中的塊級作用域，在此處不可用
      // b 變數屬於 check 函式的作用域，在此處可用
      console.log(b); // 函式作用域
    }
    // a 在此處不可用，b 在此處可用
  }
  // a,b 在此處不可用
  

什麼是作用域鏈 (Scope Chain)？

當 JavaScript 使用每一個變數的時候，會先嘗試在當前作用域中尋找該變數，若在當前的作用域找不到該變數，會一直往父層作用域尋找，直到全局作用域還是沒找到，就會直接報錯，這一層一層的關係，就是作用域鏈。讓我們透過以下程式碼來了解：

let a = 100;
function find() {
  // 在 find 函式作用域中沒有變數 a，於是透過作用域鏈往父層尋找，
  // 在這邊的父層是全域，也就找到了 a 變數
  console.log(a); // 100
}
find();