JavaScript中的變量聲明你知道嗎
變量
ECMAScript中,變量可以保存任何類型的數(shù)據(jù)(既可以是字符串也可以是數(shù)組也可以是別的……),也即“松散的”,變量只是一個用來區(qū)分的占位符,一共有var、const、let三個關(guān)鍵字用于聲明變量(var在ECMAScrip所有版本可用,后兩個只在ES6及以后可用)。
(一)var
var a;//僅定義 var b=‘hi';//定義的同時,設(shè)置值
要注意的是,值的設(shè)置可以覆蓋,但我們不推薦這么做
var a=”hello” a=”hi”
ECMAScript的變量是“松散”的,那么可以用一條語句來對不同的數(shù)據(jù)類型初始化的聲明,當(dāng)然插入、換行不是必要的,只是一定要用逗號隔開不同的變量。
Var a=“hello”,
b=12,
c=false;1)關(guān)于var聲明的變量的作用域
function test(){
var a="shanxi";
}
test();//調(diào)用函數(shù)
console.log(a);
//ReferenceError: a is not defined
//報錯:a未定義變量在使用var定義時,若是在函數(shù)內(nèi)部,則該變量在函數(shù)退出時將會被銷毀,無法再調(diào)用。這里的a在函數(shù)test內(nèi)部使用var完成定義,調(diào)用函數(shù)test之后,隨即a便被銷毀,因而出現(xiàn)如上報錯。
當(dāng)省略關(guān)鍵詞var時,這樣定義的變量將成為全局變量(不過不建議這么做,太多的全局變量會讓程序變得難以維護(hù))
function test(){
a="sichuan";
}
test();//調(diào)用函數(shù)
console.log(a);
//sichuan2)var聲明提升(hoist)
如下,結(jié)果是undefined而并沒有報錯,是因為,使用var關(guān)鍵字聲明的變量,會自動提升到函數(shù)作用域的頂部。也就是,會被ECMAScript看作
function test(){
console.log(a)
var a=12;
}
test()
//undefined也就是,會被ECMAScript看作
function test(){
var a;
console.log(a)
a=12;
}
test()
//undefined這種“提升”,會把所有變量的聲明都提到函數(shù)作用域的頂部。
(二)let
Let和var作用相似,只是let聲明的范圍是塊作用域,var聲明的范圍是函數(shù)作用域
例如如下的if語句中的{}就是一個“塊”,而不是一個函數(shù)作用域。
if(true){
var b="zhang"
console.log(b);//zhang
}
console.log(b);//zhang換成let:
if(true){
let b="zhang"
console.log(b);//zhang
}
console.log(b);//ReferenceError: b is not defined此時b在if外邊(定義b的塊作用域外)便不能被引用。
?。。∽⒁猓簤K作用域是函數(shù)作用域的子域(是前者不一定是后者是后者不一定是前者)。
?。?!注意:適用于var的作用域限制,對let是等同的(只是一個作用域是函數(shù)作用域一個是塊作用域)。
關(guān)于重復(fù)聲明,var不報錯而let會報錯,看如下實例:
var a=24;var a=12;var a=5;console.log(a);//5let b=2;let b=4;//SyntaxError: Identifier 'b' has already been declared//運行到此處就已經(jīng)報錯let b=8;console.log(b);var a=24; var a=12; var a=5; console.log(a);//5 let b=2; let b=4;//SyntaxError: Identifier 'b' has already been declared //運行到此處就已經(jīng)報錯 let b=8; console.log(b);
關(guān)于嵌套使用,JavaScript會記錄用于變量聲明的標(biāo)識符以及其所在塊的作用域,所以在嵌套使用時,不會報錯(因為在同一塊作用域中沒有重復(fù)聲明)。
var a="shanxi"
console.log(a);//shanxi
if(true){
var a="sichaun";
console.log(a);//sichuan
}
let b=3;
console.log(b);//3
if(true){
let b=5;
console.log(b);//5
}所以,let和var區(qū)別只在于,二者決定所聲明的變量的相關(guān)作用域存在。
var a; let a;//SyntaxError: Identifier 'a' has already been declared let c; var c;//SyntaxError: Identifier 'c' has already been declared
1)與var不同,let聲明的變量不會再作用域中被提升,這一現(xiàn)象被稱為“暫時性死區(qū)”
console.log(a); var a=2;//undefined console.log(b); let b=3;//ReferenceError: Cannot access 'b' before initialization
2)全局聲明
Var在全局作用域中聲明出的變量自動會成為window對象的屬性,但let不會
var a=3; console.log(window.a)//a let b=10; console.log(window.b);//undefined
不過let聲明出的變量,依舊是全局作用域發(fā)生的(不然也不會是“undeifned”),變量也會在頁面的生命周期內(nèi)存續(xù),所以必須保證頁面不會重復(fù)聲明同一個變量
(三)Const
基本上和let相同,只是使用const時,必須同時初始化變量,且嘗試修改const聲明的變量時會報錯
const n="zhang"; n="li";//TypeError: Assignment to constant variable. const a=12; const a=9;//不可以重復(fù)聲明 //SyntaxError: Identifier 'a' has already been declared
當(dāng)然,const有關(guān)聲明的限制,只適用于它指向的變量本身的引用,也就是說,若為一個對象,那么修改這一對象內(nèi)部屬性,不會違反const有關(guān)的限制。
const house={};
house.name=”myhouse”;
那么,在let和const出現(xiàn)之后,許多開發(fā)者不再很多地使用var了,多使用let和const,使得變量有了明確的作用域、聲明位置以及不變的值。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
深入理解JavaScript系列(34):設(shè)計模式之命令模式詳解
這篇文章主要介紹了深入理解JavaScript系列(34):設(shè)計模式之命令模式詳解,命令模式(Command)的定義是:用于將一個請求封裝成一個對象,從而使你可用不同的請求對客戶進(jìn)行參數(shù)化,對請求排隊或者記錄請求日志,以及執(zhí)行可撤銷的操作,需要的朋友可以參考下2015-03-03
微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06
Javascript Memoization 緩存函數(shù)使用說明
Memoization 是一種將函數(shù)返回值緩存起來的方法,學(xué)習(xí)js 面向?qū)ο蟮呐笥芽梢詤⒖枷隆?2010-05-05
JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案
這篇文章主要介紹了JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07

