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

首页

web前端

js教程

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

PHPz

Sep 07, 2023 am 09:25 AM

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

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

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

JavaScript 中的全局作用域

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

语法

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

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 id="Defining-a-variable-with-i-global-i-scope"> 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 id="Defining-a-variable-with-i-function-i-scope">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 关键字声明的变量具有块作用域。

语法

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

{
   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 id="Defining-the-variable-with-i-block-i-scope">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 id="Defining-the-variables-with-i-lexical-i-scope">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 id="Scope-Chain-in-JavaScript-i">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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。