你所知道的JS變量作用域
變量的作用域,指的是變量在腳本代碼中的可讀、可寫(xiě)的有效范圍,也就是腳本代碼中可以使用這個(gè)變量的區(qū)域。在ES6之前,變量的作用域主要分為全局作用域、局部作用域(也稱函數(shù)作用域)兩種;在ES6及其之后,變量的作用域主要分為全局作用域、局部作用域、塊級(jí)作用域這3種。相應(yīng)作用域變量分別稱為全局變量、局部變量、塊級(jí)變量。全局變量聲明在所有函數(shù)之外;局部變量是在函數(shù)體內(nèi)聲明的變量或者是函數(shù)的命名參數(shù);塊級(jí)變量是在塊中聲明的變量,只在塊中有效。
變量的作用域跟聲明方式有密切的關(guān)系。使用var聲明的變量的作用域有全局作用域和局部作用域,沒(méi)有塊級(jí)作用域;使用let和const聲明的變量有全局作用域、局部作用域和塊級(jí)作用域。
注:嚴(yán)格意義的全局變量都屬于Window對(duì)象的屬性,但let和const聲明的變量并不屬于Windows對(duì)象,所以它們并不是嚴(yán)格意義上的全局變量,在此僅僅從它們的作用域這個(gè)角度來(lái)說(shuō)它們是全局變量的。
由于var支持變量提升,所以var變量的全局作用域是對(duì)整個(gè)頁(yè)面的腳本代碼有效;而let和const不支持變量提升,所以let和const變量的全局作用域指的是從聲明語(yǔ)句開(kāi)始到整個(gè)頁(yè)面的腳本代碼結(jié)束之間的整個(gè)區(qū)域,而聲明語(yǔ)句之前的區(qū)域是沒(méi)有效的。同樣,因?yàn)関ar支持變量提升,而let和const不支持變量提升,所以使用var聲明的局部變量是在整個(gè)函數(shù)有效,而使用let和const聲明的局部變量從聲明語(yǔ)句開(kāi)始到函數(shù)結(jié)束之間的區(qū)域有效。需要注意的是,如果局部變量和全局變量同名,則在函數(shù)作用域中,局部變量會(huì)覆蓋全局變量,即在函數(shù)體中起作用的是局部變量;在函數(shù)體外,全局變量起作用,局部變量無(wú)效,此時(shí)引用局部變量將出現(xiàn)語(yǔ)法錯(cuò)誤。在塊開(kāi)始到塊級(jí)變量聲明語(yǔ)句之間區(qū)域?yàn)闀簳r(shí)性死區(qū),在這個(gè)區(qū)域,塊級(jí)變量沒(méi)有效。
另外,在非嚴(yán)格運(yùn)行模式中,變量可以不需要聲明,這些沒(méi)有聲明的變量,不管在哪里使用都屬于全局變量。通常不建議變量不聲明而直接使用,因?yàn)檫@樣有可能會(huì)產(chǎn)生一些不易發(fā)現(xiàn)的錯(cuò)誤。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var v1 = "JavaScript"; // 全局變量
let v2 = "JScript"; // 全局變量
let v3 = "Script"; // 全局變量
scopeTest(); // 調(diào)用函數(shù)
function scopeTest(){
var lv = "aaa";//局部變量
var v1 = "bbb";//局部變量
let v2 = "ccc";//局部變量
if(true){
let lv = "123";
console.log("塊級(jí)輸出的lv= " + lv); // 123
}
console.log("函數(shù)體內(nèi)輸出的lv = " +lv); //aaa
console.log("函數(shù)體內(nèi)輸出的v1 = " +v1); //bbb
console.log("函數(shù)體內(nèi)輸出的v2 = " +v2); //ccc
console.log("函數(shù)體內(nèi)輸出的v3 = " +v3); //Script
console.log("函數(shù)體內(nèi)輸出的v4 = " +v4); // undefined, v4為全局變量,賦值在后面,var存在變量提升,因而值為undefined
}
var v4 = "VB"; //全局變量
console.log("函數(shù)體外輸出的lv = " +lv); // 報(bào)ReferenceError錯(cuò)誤
console.log("函數(shù)體內(nèi)輸出的v1 = " +v1); //JavaScript
console.log("函數(shù)體內(nèi)輸出的v2 = " +v2); //JScript
console.log("函數(shù)體內(nèi)輸出的v3 = " +v3); //Script
console.log("函數(shù)體內(nèi)輸出的v4 = " +v4); // VB
</script>
</body>
</html>
上述腳本代碼分別聲明了4個(gè)全局變量、3個(gè)局部變量和1個(gè)塊級(jí)變量。在scopeTest函數(shù)體外,變量v1、v2、v3和v4為全局變量;在scopeTest函數(shù)體內(nèi),lv、v2是全局變量;在if判斷塊中,lv是塊級(jí)變量。我們看到,局部變量v1和v2與全局變量v1和v2同名,在scopeTest函數(shù)體內(nèi),局部變量v1和v2有效,因而在函數(shù)體這2個(gè)變量的輸出結(jié)果分別為bbb和ccc;在函數(shù)體外全局變量v1和v2有效,因而在函數(shù)體外,這2個(gè)變量的輸出結(jié)果分別為JavaScript和JScript。另外,塊級(jí)變量lv和局部變量lv同名,在if判斷塊中,塊級(jí)變量lv有效,因而在塊中輸出的結(jié)果為123,而在塊外,局部變量lv有效,lv變量的輸出結(jié)果為aaa。另外,全局變量v3和v4在函數(shù)體中沒(méi)有被覆蓋,因而輸出的是全局變量的值,所以v3在函數(shù)體外和體內(nèi)輸出結(jié)果都是Script,而v4變量的賦值在函數(shù)調(diào)用的后面,因而在函數(shù)體中的v4輸出結(jié)果為undefined,而在函數(shù)體外的輸出是在聲明之后,所以結(jié)果為VB。lv是局部變量,因而在函數(shù)體外訪問(wèn)會(huì)報(bào)ReferenceError錯(cuò)誤。
總結(jié):塊級(jí)變量在塊內(nèi)覆蓋局部變量,局部變量在函數(shù)體內(nèi)覆蓋全局變量,沒(méi)有被覆蓋的全局變量在函數(shù)體內(nèi)、外都有效。
歡迎關(guān)注我的公眾號(hào)前端歷劫之路
回復(fù)關(guān)鍵詞電子書(shū),即可獲取12本前端熱門(mén)電子書(shū)。
回復(fù)關(guān)鍵詞紅寶書(shū)第4版,即可獲取最新《JavaScript高級(jí)程序設(shè)計(jì)》(第四版)電子書(shū)。
關(guān)注公眾號(hào)后,點(diǎn)擊下方菜單即可加我微信,我拉攏了很多IT大佬,創(chuàng)建了一個(gè)技術(shù)交流、文章分享群,期待你的加入。
作者:Vam的金豆之路
主要領(lǐng)域:前端開(kāi)發(fā)
我的微信:maomin9761
微信公眾號(hào):前端歷劫之路