解释一下JavaScript中的范围和范围链

在JavaScript中，范围定义了我们如何以及在代码的哪个部分可以访问变量和函数。简单地说，范围可以帮助我们提高代码的安全性和可读性。因此，我们只能在其范围内访问变量和函数，而不能在其范围外访问。

我们将在本教程中讨论多种类型的作用域。

JavaScript中的global范围

全局定义的变量和函数是指在所有具有global范围的块和函数之外。我们可以在代码的任何地方访问带有全局作用域的所有变量和函数。

语法

用户可以按照下面的语法来定义一个具有全局范围的变量。

var global = 30;
function func() {
   var b = global; // global variable has a global scope so we can access it inside the function.
}

这里，全局变量global是在任何函数之外声明的，所以它有一个全局范围。然后在函数func内部通过声明一个局部变量b并将全局变量global的值赋给它来访问它。

示例

在这个例子中，我们已经在全局范围内定义了全局变量。我们在名为func()的函数中访问它，并从该函数中返回其值。

在输出中，我们可以观察到func()函数返回20，这就是全局变量的值。

<html>
   <body>
      <h2> Defining a variable with <i> global </i> scope </h2>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         var global = 20;
         function func() {
            return global;
         }
         output.innerHTML += "The value of variable named global: " + func();
      </script>
   </body>
</html>

地方/职能范围

本地范围也被称为函数范围。在函数中定义的变量，具有函数作用域/局部作用域。我们不能访问函数外的变量。

语法

你可以按照下面的语法来理解变量和函数的局部范围—-。

function func() {
   var local_var = "Hi!";
}
console.log(local_var); // this will raise an error

这里local_var在func()函数内有一个函数范围，所以我们不能在它之外访问它。

示例

在这个例子中，我们已经创建了func()函数。在func()函数中，我们将local_var变量定义为局部范围，这意味着我们只能在func()函数中访问它。我们可以看到，如果我们试图在func()函数之外访问local_var，它会产生一个错误，因为local_var是未定义的。要看到这个错误，你需要打开控制台。

<html>
   <body>
      <h2>Defining a variable with <i> function </i> scope</h2>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         function func() {
            let local_var = 20;
            output.innerHTML += "The value of local_var inside fucntion: " + local_var + "<br/>";
         }
         func();
         // the local_var can't be accessed here
         output.innerHTML += "The value of local_var outside fucntion: " +local_var+ "<br/>";
      </script>
   </body>
<html>

block范围

在JavaScript中，我们可以使用两个大括号来定义block（{ ….. }）。块范围说的是，无论我们在特定块内定义什么变量，都只能在块内访问，而不能在块外访问。用let和const关键字声明的变量具有块范围。

语法

用户可以按照下面的语法来理解变量的块范围。

{
   let block_var = 6707;
   // block_var accessible here
}

// we can't access the block_var variable here.

这里我们不能访问大括号外的block_var，因为我们已经在特定的块内定义了它。

注意关键字没有块状范围。

示例

在这个例子中，我们使用大括号定义了一个块，并定义了一个变量num。我们试图在块的内部和外部访问这个变量。你可以看到，我们不能在大括号外访问num，因为我们已经在块内定义了它。

<html>
   <body>
      <h2>Defining the variable with <i> block </i> scope </h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         {
            const num = 200;
            output.innerHTML += "Value of num inside the block: " + num + "<br>";
         }
         // num is accessible here - outside the block
         output.innerHTML += "value of num outside the block: " + num + "<br>";
      </script>
   </body>
</html>

词汇范围

词法范围和静态范围是一样的。在JavaScript中，当我们执行嵌套函数并试图访问嵌套函数中的任何变量时，它首先在本地上下文中找到该变量。如果在嵌套函数的本地上下文中没有找到该变量，它就会尝试在执行该函数的父级上下文中寻找，以此类推。最后，如果它在全局上下文中没有找到该变量，它就认为它是未定义的。

语法

用户可以按照下面的语法来理解词义范围。

var parent_var = 343;
var test = function () {
   console.log(parent_var);
};
test();

在上面的语法中，我们从执行函数的作用域中访问parent_var。由于函数log()不会在本地作用域中找到parent_var，它将尝试在调用函数的作用域中找到，也就是全局作用域。

示例

在这个例子中，我们在里面定义了test()函数和nested()函数。同时，我们在嵌套()函数中访问了global_var和parent_var。由于JavaScript不会在本地上下文中找到这两个变量，它将首先在嵌套()函数的执行上下文中寻找，然后在test()函数的执行上下文中寻找。

<html>
   <body>
      <h2>Defining the variables with <i> lexical </i> scope</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         var global_var = 576505;
         var test = function () {
            var parent_var = 343;
            var nested = function () {
               output.innerHTML += "The value of parent_var: " + parent_var + "<br/>";
               output.innerHTML += "The value of global_var: " + global_var + "<br/>";
            };
            nested();
         };
         test();
      </script>
   </body>
</html>

范围链

正如scope chain这个词所暗示的，它是一个范围链。例如，假设我们在函数内部定义嵌套函数。在这种情况下，它可以有它的局部作用域，而且在嵌套函数内声明的变量不能在外层函数中被访问。

所以，我们正在创建作用域链；这就是为什么我们称它为作用域链。

语法

用户可以按照下面的语法来学习范围链。

function outer() {
   function inner() {
      // inner’s local scope.

      // we can access variables defined inside the outer() function as inner is inside the local scope of outer
   }

   // variables defined in the inner() function, can’t be accessible here.
}

示例

在这个例子中，inner() 函数在 outer() 函数的作用域内，这意味着我们不能在 outer() 函数之外调用 inner() 函数。inner()函数在 outer()函数内部创建了作用域链。

<html>
   <body>
      <h2>Scope Chain in JavaScript </i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         function outer() {
            var emp_name = "Shubham!";
            function inner() {
               var age = 22;
               output.innerHTML += ("The value of the emp_name is " + emp_name) +"<br/>";
               output.innerHTML += "The value of the age is " + age;
            }
            inner();

            // age can't be accessible here as it is the local scope of inner
         }
         outer();
      </script>
   </body>
</html>