首页 > 新闻 > 什么是 JavaScript Scope?

什么是 JavaScript Scope?

2023-01-14 小编

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

两位年轻女性讨论 JavaScript 范围

立即下载:Java & JavaScript 简介

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

什么是 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 中,正确使用范围在安全性和代码重用方面提供了好处。通过减少命名空间冲突,可以使代码更安全,并在其他项目中再次使用它。

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


*必填

您好,访客!有什么新鲜事想告诉大家?

点击按钮快速添加回复内容: 高兴 支持 激动 给力 加油 生气 路过 威武
发表
暂时还没评论,等你发挥!