理解 JavaScript 中的作用域

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

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

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

耦合与解耦

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

let radius = 7;

function createSpecialButton(radius) {
  return <button radius={radius}>Click Me!</button>
}

const button = createSpecialButton(radius);

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

let radius = 7;

function createSpecialButton() {
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  radius = 16;
  return <button radius={radius}>Click Me!</button>
}

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

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

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

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

function createSpecialButton() {
  const radius = 7;
  return <button radius={radius}>Click Me!</button>
}

function profileButton() {
  const radius = 10;
  return <button radius={radius}>Click Me!</button>
}

function registrationButton() {
  const radius = 16;
  return <button radius={radius}>Click Me!</button>
}

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

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

JavaScript 中的作用域类型

全球范围

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

将声明置于全局范围内

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

<script>
  let username = "Garrett";
</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。

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

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

以上是理解 JavaScript 中的作用域的详细内容。更多信息请关注PHP中文网其他相关文章！