一篇文章帶你了解JavaScript作用域
在JavaScript中，對象和函數也是變量。在JavaScript中，作用域是你可以訪問的變量、對象和函數的集合。
JavaScript 有函數作用域: 這個作用域在函數內變化。
一、本地JavaScript變量
一個變量聲明在JavaScript函數內部，成為函數的局部變量。
局部變量有局部作用域: 它們只能在函數中訪問。
JS：
- //code here can not use carName
- <script>
- reFunction();
- document.getElementById("demo").innerHTML =
- "carName的類型是 " + typeof carName;
- function reFunction() {
- var carName = "Volvo";
- }
- </script>
由于局部變量只在它們的函數中被識別，所以具有相同名稱的變量可以在不同的函數中使用。
當函數啟動時創建局部變量，當函數完成時刪除。
二、全局JavaScript變量
函數外聲明的變量, 成為全局變量。
全局變量具有全局作用域: 網頁上的所有腳本和函數都可以訪問它。
- <script>
- var carName = "Volvo"; //可以從任何腳本或函數訪問全局變量
- myFunction();
- function myFunction() {
- document.getElementById("demo").innerHTML =
- "I can display " + carName;
- }
- </script>
自動全局
如果給未聲明的變量賦值, 它會自動成為全局變量。
此代碼示例將聲明一個全局變量carName，即使賦的值是函數內部。
- myFunction();
- // code here can use carName
- function myFunction() {
- carName = "Volvo";
- }
不要創建全局變量，除非你非常需要，在嚴格模式下 "Strict Mode"自動全局變量將失敗。
三、在HTML中的全局變量
在JavaScript中，全局作用域是完整的JavaScript環境。
在HTML中，全局作用域是window對象。所有的全局變量都屬于window對象。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;">
- <p>
- 在HTML中，所有的全局變量將成為窗口window變量。
- </p>
- <p id="demo"></p>
- <script>
- var carName = "Volvo";
- // code here can use window.carName
- document.getElementById("demo").innerHTML = "I can display " + window.carName;
- </script>
- </body>
- </html>
全局變量(或函數)可以覆蓋窗口變量(或函數). 任何函數，包括窗口對象，都可以覆蓋全局變量和函數.
四、JavaScript 代碼塊作用域
表中是var，let和const之間的區別。
用var關鍵字聲明的變量不能具有塊作用域，{}可以從塊外部訪問在塊內部聲明的變量：
- {
- var num = 50;
- }
- // num 能在這里使用
用let關鍵字聲明的變量可以具有“塊作用域”。
{}不能從塊外部訪問在塊內部聲明的變量：
- {
- let num = 50;
- }
- // num不能在這里使用
聲明變量with const與let]涉及塊作用域類似。
- {
- const num = 50;
- }
- // num不能在這里使用
常量的值不能通過重新分配而更改，也不能重新聲明。
五、總結
本文基于JavaScript，介紹了了函數作用域和變量作用域。介紹了變量中全局變量的幾種顯示的方法，在HTML中的全局變量應該如何去表示。通過案例的講解，讓讀者更好的去理解。
代碼很簡單， 希望能夠幫助你學習。
