您是否曾经编写过无法按预期工作的 JavaScript 代码？您可能在代码的某一部分中定义了变量或函数，但是当您尝试在其他地方使用它时，它无法正常工作。这是因为 JavaScript 有一个叫做 scope 的东西。

立即下载：Java & JavaScript 简介

在这篇博文中，我们将探讨范围以及如何在编写代码时利用它来发挥自己的优势。我们还将研究一些常见的范围界定问题以及如何解决这些问题。让我们开始吧！

什么是 JavaScript 范围？

在 JavaScript 中，范围是指代码的当前上下文。此上下文确定可以在何处访问某些变量和函数。换句话说，你决定在 JavaScript 中定义一个变量或函数的地方会影响你以后可以访问它的位置。因此，如果您在函数中定义一个变量，您将只能在该函数中访问它。

JavaScript 中有几种类型的作用域：全局作用域、局部作用域、函数作用域、块作用域和词汇作用域。

我们将在下面更深入地探讨其中的每一个。

全球范围

全局作用域意味着变量或函数在代码中的任何位置都可用。这是 JavaScript 中变量和函数的默认范围。

我们来看一个例子：

  var pet = 'dog';
    function printPet() {
      console.log(pet); // prints 'dog' to the console
    }

在上面的代码片段中，我们定义了一个名为“pet”的变量，其值为“dog”。我们还定义了一个名为“printPet”的函数，它将“pet”的值打印到控制台。

因为我们在全局范围内定义了“宠物”，所以我们可以在“printPet”函数中访问它。如果我们尝试在函数之外访问“宠物”，它仍然可用：

    console.log(pet); // prints 'dog' to the console

但是，如果我们尝试访问不在全局范围内的变量，我们将收到一个错误：

    var pet = 'cat';    
    function printPet() {
      console.log(pet); // prints 'cat' to the console
    }
    console.log(otherPet); // prints 'undefined' to the console

在上面的代码片段中，我们定义了一个名为“pet”的变量，其值为“cat”。 我们还定义了一个名为“printPet”的函数，它将“pet”的值打印到控制台。

因为我们没有在全局范围内定义“otherPet”，所以我们无法在“printPet”函数之外访问它。如果我们尝试在函数中访问它，它仍然可用：

    console.log(otherPet); // prints 'undefined' to the console

本地范围

局部作用域意味着变量或函数仅在当前代码块中可用。要创建局部范围，我们可以使用大括号：

    {
      var pet = 'cat';
    }
    console.log(pet); // prints 'undefined' to the console

在上面的代码片段中，我们定义了一个名为“pet”的变量，其值为“cat”。我们还使用大括号为变量创建局部作用域。

由于“宠物”在本地范围内，因此我们无法在大括号之外访问它。如果我们尝试在范围内访问它，它仍然可用：

    console.log(pet); // prints 'cat' to the console

功能范围

函数作用域类似于局部作用域，因为在函数中定义的变量和函数仅在该函数中可用。但是，有一个关键的区别：函数内部定义的变量和函数在全局范围内不可用。

我们来看一个例子：

    function printPet() {
      var pet = 'cat';
      console.log(pet); // prints 'cat' to the console
    }

在上面的代码片段中，我们定义了一个名为“printPet”的函数。我们还定义了一个名为“pet”的变量，其值为“cat”。

因为我们在“printPet”函数中定义了“pet”，所以我们只能在该函数中访问它。如果我们尝试在函数之外访问“宠物”，我们将得到一个错误：

    console.log(pet); // prints 'undefined' to the console

块范围

块作用域允许我们创建仅在代码块内可用的变量和函数。代码块是指任何时候使用大括号，例如：

    if (true) {
      // this is a code block
    } else {
      // this is also a code block
    }

要创建一个块范围，我们可以使用“let”或“const”关键字：

    let pet = 'cat';
    if (true) {
      let pet = 'dog';
      console.log(pet); // prints 'dog' to the console
    }
    console.log(pet); // prints 'cat' to the console

在上面的代码片段中，我们定义了一个名为“pet”的变量，其值为“cat”。我们还使用 'let' 关键字在 'if' 语句中为变量创建一个块范围。

因为我们使用“let”关键字定义了“pet”，所以我们可以在代码块中访问它。但是，“宠物”在全球范围内不可用。因此，如果我们尝试在代码块之外访问“pet”，我们将收到一个错误：

    console.log(pet); // prints 'undefined' to the console

注意：块作用域不会为 var 变量创建作用域。

词汇范围

词法范围可能比其他类型的范围复杂一些。它有时也称为静态作用域或编译时作用域。

词法作用域意味着变量的作用域由其在代码中的位置确定。换句话说，变量与其父变量位于同一范围内。

例如：

    var pet = 'cat';
    function printPet() {
      console.log(pet); // prints 'cat' to the console
    }

在上面的代码片段中，我们定义了一个名为“pet”的变量，其值为“cat”。我们还定义了一个名为“printPet”的函数。

因为我们在全局范围内定义了“pet”变量，所以它在“printPet”函数中可用。但是，如果我们尝试访问代码块中的“宠物”，它将不可用：

    if (true) {
      var pet = 'dog';
      console.log(pet); // prints 'dog' to the console
    }
    console.log(pet); // prints 'undefined' to the console

在上面的代码片段中，我们定义了一个名为“pet”的变量，其值为“cat”。我们还使用 'var' 关键字在 'if' 语句中为变量创建一个块范围。

因为我们使用“var”关键字定义了“宠物”，所以它在全局范围内不可用。因此，如果我们尝试在代码块之外访问“pet”，我们将收到一个错误：

    console.log(pet); // prints 'undefined' to the console

总结 JavaScript 范围

范围是 JavaScript 中的一个重要概念，它决定了变量和函数在哪里可用。Const 和 let 变量遵循相同的范围规则，无论它们是在代码块、函数还是模块中。另一方面，var 变量仅在函数或模块内部时才遵循这些范围规则。

在 JavaScript 中，正确使用范围在安全性和代码重用方面提供了好处。通过减少命名空间冲突，可以使代码更安全，并在其他项目中再次使用它。

现在您已经了解了作用域的基础知识，可以开始使用它来编写更好、更易于维护的代码。