这个话题已经被讨论过很多次了，不过，我想从它要解决的问题的角度来谈谈作用域是什么（使用 JavaScript）。

范围实际上解决了什么问题？

随着应用程序规模的增加，它们的复杂性也会增加 - 范围是管理这种复杂性的工具。

耦合与解耦

假设我们有一个设置为 7 的全局变量 radius 和一个返回“特殊”按钮的函数 createSpecialButton()：

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

此函数返回一个具有特定半径的按钮，在本例中设置为 7。现在，代码没有问题，因为我们知道半径设置为多少，因此知道生成的按钮将是什么看起来像。但是，如果我们添加两个都依赖于半径变量的函数，会发生什么情况呢？我们的代码现在看起来像这样：

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

进行此更改后，调用 createSpecialButton() 时半径的值将是多少？如果您猜对了 16 ，那么您就猜对了。

仅仅通过添加两个附加函数，我们就大大增加了代码的复杂性，现在生活在一个多个不相关的代码片段依赖于相同依赖项的世界中。现在，想象这是一个更大的全栈应用程序 - 很快就会变得很难推断某些状态来自何处以及如何在出现错误时修复它们。

为了解决这个问题，我们可以为每个函数定义单独的半径变量：

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

您可能会看到此更改并说“好吧，好吧，但现在有更多代码 - 这似乎不对”。没错，代码更多，但是，如果代码更少，那么代码的可维护性会降低，但并不是更好——我们所做的更改提高了代码的可维护性，这始终是一件好事。

JavaScript 中的作用域类型

全球范围

整个应用程序中的所有内容都可以访问全局范围。如果您正在编写 Node.JS 应用程序，您可能不会使用或遇到全局范围。但是，如果您使用的是 Web 应用程序，则可以使用脚本标记或使用 window.SOMETHING.

例如，使用 script 标签，您可以执行如下操作：

此外，MDN 将“全局作用域”的定义表述为“在脚本模式下运行的所有代码的默认作用域”。我认为上面的例子就是他们所指的。

使用窗口全局对象时，您可能会执行以下操作：

  window.username = "Garrett";

模块范围

如果您在 Node.JS 项目中工作，那么模块作用域就是您将在最高级别上使用的内容。每个带有 .js（或 .ts）扩展名的文件都是一个单独的模块，这意味着给定文件中的所有内容最多都可以访问您的声明，除非您显式导出它们。

例如，在user.ts中，两个函数都可以访问变量名。

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

但是，在这个版本的user.ts中，只有accessName()可以访问变量名：

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

请注意，在这两个模块中，没有导出任何内容。换句话说，其他模块中的代码无法知道该代码，因此无法导入和使用它。不过我们可以改变这一点：

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

现在，这两个函数都已导出，因此可以被其他模块使用。这在技术上与我们之前讨论的全局作用域的概念不同，但相似之处在于我们通过将代码从一个模块导入到另一个模块来使代码可供整个应用程序使用。

功能范围

我们实际上已经看到了函数作用域。查看下面的代码（与上面的代码片段之一相同）：

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

尝试运行这个 -greetAgain() 将遇到错误，因为它尝试读取的名称变量仅存在于greet()的上下文（即“范围”）内。

注意：您可能会看到这被称为“本地范围”。

块范围

块作用域是一个有趣的作用域，因为它只适用于较新的变量类型 - 具体来说，let 和 const，而不是 var。我们来看看吧

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

在上面的示例中，我们可以看到 1) 将代码放置在 {} 中会创建一个代码块。 2）使用let和const定义的变量只能在该代码块内访问。 3）用var创建的变量不遵循块作用域的规则，因为它仍然可以在{}之外访问。

注意：现代 JavaScript 使用 let 和 const 来声明变量，而不是 var。

声明应在必要的最小范围内作出

最后，请记住，作用域是管理代码复杂性的工具，声明的作用域级别越高，代码的复杂性就越高，因此最好将声明瞄准放置在必要的最小范围内。