在 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 中的作用域和作用域鏈的詳細內容，更多請關注www.92cms.cn其它相關文章！
