掌握 JavaScript 中的作用域和詞法作用域

JavaScript 中的作用域和詞法作用域

理解範圍和詞法範圍是寫出高效且無錯誤的JavaScript程式碼的基礎。這些概念規定了變數的存取方式以及它們在程式碼中的可用位置。

1. JavaScript 中的作用域

Scope 指的是目前執行的上下文，它決定了變數的可見性和可訪問性。 JavaScript 有三種類型的作用域：

A.塊範圍

• 用 let 和 const 宣告的變數是區塊作用域的，這表示它們只能在定義它們的區塊內存取。
• 在 ES6 中引入。

範例：

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B.功能範圍

• 用 var 宣告的變數是函數作用域的。它們可以在聲明它們的整個函數中存取。
• 不尊重塊邊界。

範例：

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C.全球範圍

• 在任何函數或區塊之外宣告的變數都位於全域範圍內，並且可以在程式中的任何位置存取。

範例：

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

2.詞彙範圍

詞法作用域表示變數的作用域由其在原始碼中的位置決定。函數使用定義時的作用域鏈執行，而不是呼叫時的作用域鏈。

A.範圍鏈

作用域鍊是 JavaScript 用來解析變數參考的作用域層次結構。如果在目前作用域中沒有找到變量，它將在外部作用域中查找，直到到達全域作用域。

範例：

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

B.巢狀函數

由於詞法作用域，內部函數可以存取其外部函數中的變數。

範例：

function outerFunction() {
  let outerVariable = "Outer";

  function innerFunction() {
    let innerVariable = "Inner";
    console.log(outerVariable); // Outer
    console.log(innerVariable); // Inner
  }

  innerFunction();
}
outerFunction();

3.實際範例

A.存取外部作用域變數

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier; // Accesses 'multiplier' from outer scope
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

B.閉包中的詞法範圍

閉包依賴詞法作用域來記住外在環境中的變數。

範例：

function outerFunction() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // Output: 1
counter(); // Output: 2

4.範圍的常見錯誤

A.忘記 let 和 const

未使用 let、const 或 var 宣告的變數將成為全域變數。

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B.使用 var 塊作用域

在區塊內使用 var 會導致意想不到的結果。

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C.影子

在巢狀作用域中宣告的變數可以隱藏（覆蓋）外部作用域中的變數。

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

5.範圍與詞法範圍的差異

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

以上是掌握 JavaScript 中的作用域和詞法作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章！