JavaScript 解释作用域和作用域链

在本文中，我们将尝试理解变量的作用域以及其函数（或方法）的作用域。我们将通过一些具体的编码示例来理解作用域链。

首先让我们看下面描述作用域的部分。

作用域：

JavaScript 中的作用域实际上决定了在代码或程序的各个部分中变量和函数的可访问性。
换句话说，作用域将帮助我们确定代码或程序的某个给定部分中可以访问哪些变量或函数，以及不能访问哪些变量或函数。
在作用域内部，可以访问变量、函数或方法。在指定作用域范围之外，数据无法访问。
JavaScript 中有三种类型的作用域： 全局作用域、局部/函数作用域 和 块级作用域 。让我们在下面的部分简要了解它们。
全局作用域：
在全局命名空间（如 area 或 location）下声明的变量或函数（或方法）被确定为全局作用域。
这意味着所有具有全局作用域的变量可以在代码或程序的任何地方轻松访问。

示例 1： 在这个示例中，我们将声明一个全局变量，在代码的后期将使用它。我们将在一个函数中调用该变量。我们将在另一个函数中调用该函数，然后调用那个其他函数来查看结果。

JavaScript 代码

<script> 
    // Global Scoped Variable 
    var global_variable = "GeeksforGeeks"; 
  
    // First function... 
    function first_function() { 
        return global_variable; 
    } 
  
    // Second function... 
    function second_function() { 
        return first_function(); 
    } 
  
    console.log(second_function()); 
</script>

输出：

GeeksforGeeks

本地或函数作用域：

函数或方法中声明的变量具有本地或函数作用域。
这意味着在函数或方法内声明的变量或函数只能在该函数内部访问。

示例 2： 在这个示例中，我们将声明一个包含本地/函数作用域变量的主函数。我们将声明一个嵌套函数，该函数将考虑这个变量并对其执行乘法运算。我们将在主函数内部调用嵌套函数，然后在其声明之外调用主函数。

然后，最后我们将调用我们的本地/函数作用域变量以及本地/函数作用域函数，以查看它们在调用时显示的输出。

Javascript

<script> 
    function main_function() { 
  
        // Variable with Local Scope...     
        var a = 2; 
  
        // Nested Function having Function Scope     
        var multiply = function () { 
              
            // It can be accessed and altered as well 
            console.log(a * 5); 
        } 
  
        // Will be called out when main_function gets called 
        multiply(); 
    } 
      
    // Display's the result... 
    console.log(main_function()); 
  
    // Throws a reference error since it  
    // is a locally scoped variable 
    console.log(a); 
  
    // Throws a reference error since it  
    // is a locally scoped function 
    multiplyBy2(); 
</script>

输出：

10
undefined
Uncaught ReferenceError: a is not defined

块级作用域：

块级作用域与使用 let 和 const 声明的变量或函数有关，因为 var 没有块级作用域。
块级作用域告诉我们，在块 { } 内声明的变量只能在该块内访问，不能在该块外访问。

示例3： 在这个示例中，我们将使用花括号“{ }”声明一个块，并在该块内声明一个具有特定值的变量。我们将在被封锁的作用域外调用该变量，以查看它实际显示的输出。

JavaScript

<script> 
    { 
        let x = 13; 
    } 
    // Throws a reference error  
    // since x is declared inside a block which  
    // cannot be used outside the block 
    console.log(x); 
</script>

输出:

Uncaught ReferenceError: x is not defined

作用域链 :

JavaScript 引擎使用作用域来确定变量的精确位置或可访问性，该过程称为作用域链。
作用域链意味着一个变量的作用域（可以是全局的或局部/函数的或块级的作用域）被另一个具有不同作用域的变量或函数使用（可以是全局的或局部/函数的或块级的作用域）。
这个完整的链条形式会一直延续下去，直到用户根据需求选择停止。

示例4： 在这个示例中，我们首先声明一个全局作用域变量，然后在代码的后面部分使用它，然后我们将声明一个主函数，在其中我们将做一些事情。我们将在该主函数内部声明另一个局部/函数作用域变量，并在其后声明两个嵌套函数（具有局部/函数作用域），这两个函数都在主函数内部。

首先，嵌套函数将打印局部/函数作用域变量的值，第二个嵌套函数将显示全局作用域变量的值。
我们将在主函数内部调用这两个嵌套函数，然后在其声明命名空间之外调用主函数。

JavaScript

<script> 
    // Global variable 
    var global_variable = 20; 
  
    function main_function() { 
        // Local Variable 
        var local_variable = 30; 
  
        var nested_function = function () { 
  
            // Display the value inside the local variable 
            console.log(local_variable); 
        } 
  
        var another_nested_function = function () { 
              
            // Displays the value inside the global variable 
            console.log(global_variable); 
        } 
  
        nested_function(); 
        another_nested_function(); 
    } 
  
    main_function(); 
</script>

输出：