JS 的作用域：一个分层管理的世界

2024-01-25 00:28:47

在JavaScript开发中，作用域决定了代码中变量和函数的可见性。在这个分层管理的世界中，变量的作用域可以跨越多个代码块，理解作用域概念对于创建健壮、可维护的代码是至关重要的。

1. 作用域概述

作用域是一个术语，用于代码中变量和函数的可见性。在JavaScript中，作用域可以跨越多个代码块，这意味着在父作用域中声明的变量可以在子作用域中使用。

作用域有三种基本类型：

全局作用域：全局作用域是JavaScript程序中最大的作用域。它包含在脚本中声明的所有变量和函数。
函数作用域：函数作用域是函数体内代码的作用域。它包含在函数中声明的所有变量和函数。
块级作用域：块级作用域是使用花括号创建的代码块内的作用域。它包含在代码块中声明的所有变量和函数。

作用域嵌套在一起，形成作用域链。当JavaScript代码执行时，它首先在全局作用域中查找变量。如果变量在全局作用域中未找到，则在当前作用域中查找。如果变量在当前作用域中未找到，则在父作用域中查找，以此类推，直到找到变量或到达全局作用域的顶部。

2. 作用域示例

以下代码示例演示了作用域的概念：

// 全局作用域
var globalVariable = 10;

// 函数作用域
function myFunction() {
  // 函数作用域变量
  var localVariable = 20;

  // 访问全局变量
  console.log(globalVariable); // 输出：10

  // 访问函数作用域变量
  console.log(localVariable); // 输出：20
}

// 块级作用域
if (true) {
  // 块级作用域变量
  var blockVariable = 30;

  // 访问全局变量
  console.log(globalVariable); // 输出：10

  // 访问函数作用域变量
  console.log(localVariable); // 错误：localVariable is not defined

  // 访问块级作用域变量
  console.log(blockVariable); // 输出：30
}

// 访问全局变量
console.log(globalVariable); // 输出：10

// 访问函数作用域变量
console.log(localVariable); // 错误：localVariable is not defined

// 访问块级作用域变量
console.log(blockVariable); // 错误：blockVariable is not defined