解释 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> 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 关键字声明的变量具有块作用域。
语法
用户可以按照下面的语法来了解变量的块作用域。
{
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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高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在后端开发中发挥作用，支持全栈开发。
