极客教程解释一下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>
在本教程中，我们讨论了JavaScript中的作用域和作用链。我们讨论了globle、local/function、block和lexical作用域。在最后一节，我们了解了作用域链在Javascript中是如何工作的。