在 JavaScript 中，范圍 定義我們?nèi)绾我约霸诖a的哪個(gè)部分訪問(wèn)變量和函數(shù)。簡(jiǎn)單來(lái)說(shuō)，范圍可以幫助我們提高代碼的安全性和可讀性。因此，我們只能在其作用域內(nèi)訪問(wèn)變量和函數(shù)，而不能在其外部訪問(wèn)。
我們將在本教程中討論多種類型的范圍。
JavaScript 中的全局作用域
全局定義的變量和函數(shù)意味著在具有全局范圍的所有塊和函數(shù)之外。我們可以在代碼中的任何位置訪問(wèn)具有全局作用域的所有變量和函數(shù)。
語(yǔ)法
用戶可以按照下面的語(yǔ)法來(lái)定義具有全局作用域的變量。
var global = 30;
function func() {
var b = global; // global variable has a global scope so we can access it inside the function.
}
登錄后復(fù)制
這里，全局變量global是在任何函數(shù)之外聲明的，因此它具有全局作用域。然后通過(guò)聲明局部變量 b 并將全局變量 global 的值賦給它，在函數(shù) func 內(nèi)部訪問(wèn)它。
示例
在此示例中，我們定義了具有全局作用域的全局變量。我們?cè)诿麨?func() 的函數(shù)內(nèi)訪問(wèn)它并從函數(shù)返回它的值。
在輸出中，我們可以觀察到 func() 函數(shù)返回 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>
登錄后復(fù)制
本地/函數(shù)作用域
局部作用域也稱為函數(shù)作用域。函數(shù)內(nèi)部定義的變量具有函數(shù)作用域/局部作用域。我們無(wú)法訪問(wèn)函數(shù)外部的變量。
語(yǔ)法
您可以按照下面的語(yǔ)法來(lái)了解變量和函數(shù)的局部范圍 –
function func() {
var local_var = "Hi!";
}
console.log(local_var); // this will raise an error
登錄后復(fù)制
此處 local_var 在 func() 函數(shù)內(nèi)部有一個(gè)函數(shù)作用域，因此我們無(wú)法在其外部訪問(wèn)它。
示例
在此示例中，我們創(chuàng)建了 func() 函數(shù)。在 func() 函數(shù)內(nèi)部，我們定義了具有局部作用域的 local_var 變量，這意味著我們只能在 func() 函數(shù)內(nèi)部訪問(wèn)它。我們可以看到，如果我們嘗試在 func() 函數(shù)之外訪問(wèn) local_var ，則會(huì)引發(fā)錯(cuò)誤，因?yàn)?local_var 未定義。要查看此錯(cuò)誤，您需要打開(kāi)控制臺(tái)。
<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>
登錄后復(fù)制
塊范圍
在 JavaScript 中，我們可以使用兩個(gè)大括號(hào)({ ….. }) 來(lái)定義塊。塊作用域表示我們?cè)谔囟▔K內(nèi)定義的任何變量只能在塊內(nèi)訪問(wèn)，而不能在塊外訪問(wèn)。使用 let 和 const 關(guān)鍵字聲明的變量具有塊作用域。
語(yǔ)法
用戶可以按照下面的語(yǔ)法來(lái)了解變量的塊作用域。
{
let block_var = 6707;
// block_var accessible here
}
// we can't access the block_var variable here.
登錄后復(fù)制
在這里，我們無(wú)法訪問(wèn)大括號(hào)之外的 block_var，因?yàn)槲覀円呀?jīng)在特定塊內(nèi)定義了它。
注意 – 使用var關(guān)鍵字聲明的變量沒(méi)有塊作用域。
示例
在這個(gè)例子中，我們使用花括號(hào)定義了一個(gè)塊并定義了一個(gè)變量num。我們嘗試在塊內(nèi)部和外部訪問(wèn)這個(gè)變量。您可以觀察到，我們無(wú)法訪問(wèn)大括號(hào)之外的 num，因?yàn)槲覀円呀?jīng)在塊內(nèi)定義了它。
<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>
登錄后復(fù)制
詞法范圍
詞法作用域與靜態(tài)作用域相同。在 JavaScript 中，當(dāng)我們執(zhí)行嵌套函數(shù)并嘗試訪問(wèn)嵌套函數(shù)內(nèi)的任何變量時(shí)，它會(huì)首先在本地上下文中找到該變量。如果它在嵌套函數(shù)的本地上下文中找不到變量，它會(huì)嘗試在函數(shù)執(zhí)行的父上下文中查找，依此類推。最后，如果在全局上下文中沒(méi)有找到該變量，則認(rèn)為該變量未定義。
語(yǔ)法
用戶可以按照下面的語(yǔ)法來(lái)理解詞法范圍。
var parent_var = 343;
var test = function () {
console.log(parent_var);
};
test();
登錄后復(fù)制
在上面的語(yǔ)法中，我們從函數(shù)執(zhí)行的范圍訪問(wèn)了parent_var。由于函數(shù)log()不會(huì)在局部作用域中找到parent_var，因此它將嘗試在調(diào)用該函數(shù)的作用域（即全局作用域）中查找。
示例
在這個(gè)例子中，我們?cè)诶锩娑x了test()函數(shù)和nested()函數(shù)。此外，我們正在nested()函數(shù)內(nèi)訪問(wèn)global_var和parent_var。由于 JavaScript 不會(huì)在本地上下文中找到這兩個(gè)變量，因此它將首先在nested()函數(shù)的執(zhí)行上下文中查找，然后在test()函數(shù)的執(zhí)行上下文中查找。
<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>
登錄后復(fù)制
作用域鏈
正如作用域鏈一詞所暗示的那樣，它是一個(gè)作用域鏈。例如，假設(shè)我們?cè)诤瘮?shù)內(nèi)部定義了嵌套函數(shù)。在這種情況下，它可以擁有其局部作用域，并且嵌套函數(shù)內(nèi)部聲明的變量無(wú)法在外部函數(shù)中訪問(wèn)。
因此，我們正在創(chuàng)建范圍鏈；這就是為什么我們稱其為作用域鏈。
語(yǔ)法
用戶可以按照下面的語(yǔ)法來(lái)了解作用域鏈。
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.
}
登錄后復(fù)制
示例
在這個(gè)例子中，inner()函數(shù)位于outer()函數(shù)的作用域內(nèi)，這意味著我們不能在outer()函數(shù)之外調(diào)用inner()函數(shù)。 inner() 函數(shù)在outer() 函數(shù)內(nèi)部創(chuàng)建作用域鏈。
<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>
登錄后復(fù)制
在本教程中，我們討論了 JavaScript 中的作用域和作用域鏈。我們討論了全局、局部/函數(shù)、塊和詞法作用域。在上一節(jié)中，我們了解了作用域鏈在 Javascript 中的工作原理。
以上就是解釋 JavaScript 中的作用域和作用域鏈的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
