🔥《ChatGPT 指令大全與創新應用》新書上架!👉 立即購買

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 判斷式中,就屬於塊級作用域。要注意的是,只有 letconst 定義的變數會屬於塊級作用域,如果是 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();
© 2023 explainthis.io
酉是數據科技股份有限公司