解釋 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)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
