在javascript中,作用域是變數(物件、函數)的可存取範圍,是變數在腳本程式碼中的可讀、寫的有效範圍;作用域可以控制變數的可見性和生命週期。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
幾乎所有的語言都有作用域的概念,簡單的說,作用域(scope)就是變數的可訪問範圍,即作用域控制變數的可見性和生命週期。
在 JavaScript 中, 物件和函數同樣也是變數。
在ECMAScript6 之前,變數的作用域主要分為全域作用域、局部作用域(也稱為函數作用域)兩種;在ECMAScript6 及其之後,變數的作用域主要分為全域作用域、局部作用域和區塊級作用域這3 種。
對應作用域的變數分別稱為全域變數、局部變數和區塊層級變數。
全域變數宣告在所有函數之外;
#局部變數是在函數體內宣告的變數或是函數的命名參數;
區塊級變數是在區塊中宣告的變數,只在區塊中有效。
變數的作用域跟宣告方式有著密切的關係。使用 var 宣告的變數的作用域有全域作用域和函數作用域,沒有區塊級作用域;使用 let 和 const 宣告的變數有全域作用域、局部作用域和區塊級作用域。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> var v1 = "JavaScript"; //全局变量 let v2 = "JScript"; //全局变量 let v3 = "Script"; //全局变量 scopeTest(); //调用函数 function scopeTest() { var lv = "aaa"; //局部变量 var v1 = "bbb"; //局部变量 let v2 = "ccc"; //局部变量 if (true) { let lv = "123"; //块级变量 console.log("块内输出的lv = " + lv); //123 } console.log("函数体内输出的lv = " + lv); //aaa console.log("函数体内输出的v1 = " + v1); //bbb console.log("函数体内输出的v2 = " + v2); //ccc console.log("函数体内输出的v3 = " + v3); //Script //v4为全局变量,赋值在后面,因而值为undefined console.log("函数体内输出的v4 = " + v4); } var v4 = "VBScript"; //全局变量 console.log("函数体外输出的lv = " + lv); //① 报ReferenceError错误 console.log("函数体外输出的v1 = " + v1); //JavaScript console.log("函数体外输出的v2 = " + v2); //JScript console.log("函数体外输出的v3 = " + v3); //Script console.log("函数体外输出的v3 = " + v4); //VBScript </script> </body> </html>
上述腳本程式碼分別宣告了 4 個全域變數、3 個局部變數和 1 個區塊層級變數。在 scopeTest 函數體外,變數 v1、v2、v3 和 v4 為全域變數;在 scopeTest 函數體內,lv、v2是全域變數;在 if 判斷區塊中,lv 是區塊級變數。
我們看到,局部變數v1 和v2 與全域變數v1 和v2 同名,在scopeTest 函數體內,局部變數v1 和v2 有效,因而在函數體這2 個變數的輸出結果分別為「bbb 」和「ccc」;在函數體外,全域變數v1 和v2 有效,因而在函數體外,這2 個變數的輸出結果分別為「JavaScript」和「JScript」。
另外,區塊級變數lv 和局部變數lv 同名,在if 判斷區塊中,區塊級變數lv 有效,因而在區塊中輸出的結果為“123”,而在區塊外,局部變數lv有效,lv 變數的輸出結果為「aaa」。
另外,全域變數v3 和v4 在函數體中沒有被覆蓋,因而輸出的是全域變數的值,所以v3 在函數體內和體外的輸出結果都為“Script”,而v4 變數的賦值在函數呼叫的後面,因而在函數體中的v4 輸出結果為“undefined”,而在函數體外的輸出是在宣告之後,所以結果為“VBScript”。 lv 是局部變量,因而在函數體外存取會報「ReferenceError」錯誤。
上述程式碼在 Chrome 瀏覽器中運作後,開啟瀏覽器的控制台,可以看到下圖所示的輸出結果。
28行程式碼錯誤的原因:
lv 變數為局部變量,離開函數後無效。將這行程式碼註解後再運行,此時開啟瀏覽器控制台可看到:
#【相關推薦:javascript學習教學 #】
以上是javascript中作用域是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!