解釋 JavaScript 中的作用域和作用域鏈
- PHPz轉載
- 2023-09-07 09:25:02977瀏覽
在 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中文網其他相關文章！