掌握 JavaScript 中的作用域和詞法作用域-js教程-PHP中文網

Mastering Scope and Lexical Scope in 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.

範圍

詞法範圍

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

使用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 以避免意外的全域變數。