解释 JavaScript 中的作用域和作用域链-js教程-PHP中文网

解释 JavaScript 中的作用域和作用域链

PHPz

发布： 2023-09-07 09:25:02

转载

1049人浏览过

解释 javascript 中的作用域和作用域链

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

我们将在本教程中讨论多种类型的范围。

JavaScript 中的全局作用域

全局定义的变量和函数意味着在具有全局范围的所有块和函数之外。我们可以在代码中的任何位置访问具有全局作用域的所有变量和函数。

语法

用户可以按照下面的语法来定义具有全局作用域的变量。

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

这里，全局变量global是在任何函数之外声明的，因此它具有全局作用域。然后通过声明局部变量 b 并将全局变量 global 的值赋给它，在函数 func 内部访问它。

示例

在此示例中，我们定义了具有全局作用域的全局变量。我们在名为 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>

登录后复制

块范围

在 JavaScript 中，我们可以使用两个大括号({ ….. }) 来定义块。块作用域表示我们在特定块内定义的任何变量只能在块内访问，而不能在块外访问。使用 let 和 const 关键字声明的变量具有块作用域。

语法

用户可以按照下面的语法来了解变量的块作用域。

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

查看详情

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

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

登录后复制

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

注意 - 使用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()函数。此外，我们正在nested()函数内访问global_var和parent_var。由于 JavaScript 不会在本地上下文中找到这两个变量，因此它将首先在nested()函数的执行上下文中查找，然后在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>

登录后复制

作用域链

正如作用域链一词所暗示的那样，它是一个作用域链。例如，假设我们在函数内部定义了嵌套函数。在这种情况下，它可以拥有其局部作用域，并且嵌套函数内部声明的变量无法在外部函数中访问。

因此，我们正在创建范围链；这就是为什么我们称其为作用域链。

语法

用户可以按照下面的语法来了解作用域链。

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>

登录后复制

在本教程中，我们讨论了 JavaScript 中的作用域和作用域链。我们讨论了全局、局部/函数、块和词法作用域。在上一节中，我们了解了作用域链在 Javascript 中的工作原理。

以上就是解释 JavaScript 中的作用域和作用域链的详细内容，更多请关注php中文网其它相关文章！