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

理解範(fàn)圍和詞法範(fàn)圍是寫(xiě)出高效且無(wú)錯(cuò)誤的JavaScript程式碼的基礎(chǔ)。這些概念規(guī)定了變數(shù)的存取方式以及它們?cè)诔淌酱a中的可用位置。

1. JavaScript 中的作用域

Scope 指的是目前執(zhí)行的上下文，它決定了變數(shù)的可見(jiàn)性和可訪問(wèn)性。 JavaScript 有三種類型的作用域：

A.塊範(fàn)圍

• 用 let 和 const 宣告的變數(shù)是區(qū)塊作用域的，這表示它們只能在定義它們的區(qū)塊內(nèi)存取。
• 在 ES6 中引入。

範(fàn)例：

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

B.功能範(fàn)圍

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

範(fàn)例：

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

C.全球範(fàn)圍

• 在任何函數(shù)或區(qū)塊之外宣告的變數(shù)都位於全域範(fàn)圍內(nèi)，並且可以在程式中的任何位置存取。

範(fàn)例：

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

2.詞彙範(fàn)圍

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

A.範(fàn)圍鏈

作用域鍊是 JavaScript 用來(lái)解析變數(shù)參考的作用域?qū)哟谓Y(jié)構(gòu)。如果在目前作用域中沒(méi)有找到變量，它將在外部作用域中查找，直到到達(dá)全域作用域。

範(fàn)例：

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

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

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

B.巢狀函數(shù)

由於詞法作用域，內(nèi)部函數(shù)可以存取其外部函數(shù)中的變數(shù)。

範(fàn)例：

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

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

  innerFunction();
}
outerFunction();

3.實(shí)際範(fàn)例

A.存取外部作用域變數(shù)

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.閉包中的詞法範(fàn)圍

閉包依賴詞法作用域來(lái)記住外在環(huán)境中的變數(shù)。

範(fàn)例：

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

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

4.範(fàn)圍的常見(jiàn)錯(cuò)誤

A.忘記 let 和 const

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

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

B.使用 var 塊作用域

在區(qū)塊內(nèi)使用 var 會(huì)導(dǎo)致意想不到的結(jié)果。

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

C.影子

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

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

5.範(fàn)圍與詞法範(fàn)圍的差異

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

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

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

以上是掌握 JavaScript 中的作用域和詞法作用域的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！