函数作用域与块作用域：掌握 JavaScript 作用域奥秘

见解分享

2023-11-10 18:39:42

函数作用域 vs. 块作用域：揭开 JavaScript 作用域的面纱

在 JavaScript 中，作用域定义了变量、函数和对象的可见性。理解函数作用域和块作用域之间的差异对于编写清晰、可维护的代码至关重要。

函数作用域

函数作用域是指在函数内声明的变量只在该函数内可见和可用。这些变量被称为函数作用域变量或局部变量。函数作用域变量只能在函数执行期间访问，一旦函数执行完毕，它们就会被销毁。

块作用域

块作用域是 JavaScript ES6 中引入的一个概念。它允许在代码块（例如，使用大括号 {} 括起来的语句组）内声明变量。块作用域变量只在该代码块内可见和可用。一旦代码块执行完毕，这些变量就会被销毁。

区分函数作用域和块作用域

示例 1：函数作用域

function myFunction() {
  var x = 10; // 函数作用域变量
}

console.log(x); // ReferenceError: x is not defined

在这个示例中，变量 x 在函数 myFunction 内声明，因此它具有函数作用域。这意味着它只能在 myFunction 的内部访问。当我们尝试在函数外部访问 x 时，会抛出一个 ReferenceError。

示例 2：块作用域

if (true) {
  let y = 20; // 块作用域变量
}

console.log(y); // ReferenceError: y is not defined

在该示例中，变量 y 在一个代码块内声明，因此它具有块作用域。这意味着它只能在代码块的内部访问。当我们尝试在代码块外部访问 y 时，会抛出一个 ReferenceError。

作用域规则：变量声明

函数作用域和块作用域影响变量声明的方式。

函数作用域

在函数作用域中，使用 var 声明的变量具有函数作用域。使用 let 或 const 关键字声明的变量在 ES6 中不可用。

块作用域

在块作用域中，使用 let 或 const 关键字声明的变量具有块作用域。使用 var 关键字声明的变量在 ES6 中不可用。

变量提升：函数作用域的特殊行为

在函数作用域中，使用 var 关键字声明的变量会经历一个称为变量提升的过程。这意味着变量在执行代码之前被提升到函数的顶部。

function myFunction() {
  console.log(x); // undefined
  var x = 10;
}

myFunction();

在该示例中，变量 x 在函数执行之前被提升，因此即使我们在声明之前尝试访问它，它也不会抛出错误。它将被输出为 undefined。

JavaScript 闭包：函数作用域的强大功能

闭包是引用了外部作用域变量的函数。当函数从外部作用域返回后，它仍然可以访问这些变量。闭包允许函数即使在外部作用域不再可用时也能记住其状态。

function createCounter() {
  let count = 0;

  return function() {
    return ++count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2

在这个示例中，函数 createCounter 返回一个闭包函数，该函数引用了外部作用域变量 count。即使函数 createCounter 执行完毕，闭包函数仍然可以访问并修改变量 count。

作用域链：解析变量查找

JavaScript 使用作用域链机制来查找变量。当尝试访问变量时，解析器会从当前作用域开始向上查找作用域链，直到找到该变量或达到全局作用域。

let globalVar = 10;

function myFunction() {
  let localVar = 20;

  if (true) {
    let blockVar = 30;

    console.log(globalVar); // 10
    console.log(localVar); // 20
    console.log(blockVar); // 30
  }

  console.log(globalVar); // 10
  console.log(localVar); // 20
}

myFunction();