掌握 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.範圍與詞法範圍的差異

Scope	Lexical Scope
Refers to the context in which variables are accessible.	Refers to how the location of variables in the code determines scope.
Can be global, block, or function.	Depends on the structure of the code when it is written.
Dynamic during runtime.	Fixed during code definition.

範圍

---

詞法範圍

標題> 指的是可以存取變數的上下文。 指的是程式碼中變數的位置如何決定範圍。 可以是全域、區塊或函數。 取決於編寫程式碼時的結構。 運行時動態。 在程式碼定義期間修復。 表>

6.最佳實務

使用let和const

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

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

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

： 始終使用 let 和 cons 以避免意外的全域變數。

1. 
   

   最小化全域變數
:
2. 全域變數可能會導致命名衝突。將程式碼封裝在函數或模組中。

   
   

   理解詞彙範圍
:

利用閉包和詞法作用域來寫出更清晰、更有效率的程式碼。

---

總結
• 作用域定義了變數可以存取的位置，有全域、區塊、函數三種型別。
• 詞法作用域
確保函數總是使用定義它的作用域。

掌握這些概念對於除錯和編寫有效的 JavaScript 程式碼至關重要。

嗨，我是 Abhay Singh Kathayat！

我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

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