變量

ECMAScript中，變量可以保存任何類型的數(shù)據(jù)（既可以是字符串也可以是數(shù)組也可以是別的……），也即“松散的”，變量只是一個(gè)用來區(qū)分的占位符，一共有var、const、let三個(gè)關(guān)鍵字用于聲明變量（var在ECMAScrip所有版本可用，后兩個(gè)只在ES6及以后可用）。

（一）var

var a；//僅定義
var b=‘hi'；//定義的同時(shí)，設(shè)置值

要注意的是，值的設(shè)置可以覆蓋，但我們不推薦這么做

var a=”hello”
a=”hi”

ECMAScript的變量是“松散”的，那么可以用一條語句來對不同的數(shù)據(jù)類型初始化的聲明，當(dāng)然插入、換行不是必要的，只是一定要用逗號(hào)隔開不同的變量。

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
//報(bào)錯(cuò)：a未定義

變量在使用var定義時(shí)，若是在函數(shù)內(nèi)部，則該變量在函數(shù)退出時(shí)將會(huì)被銷毀，無法再調(diào)用。這里的a在函數(shù)test內(nèi)部使用var完成定義，調(diào)用函數(shù)test之后，隨即a便被銷毀，因而出現(xiàn)如上報(bào)錯(cuò)。

當(dāng)省略關(guān)鍵詞var時(shí)，這樣定義的變量將成為全局變量（不過不建議這么做，太多的全局變量會(huì)讓程序變得難以維護(hù)）

function test(){
    a="sichuan";
}
test();//調(diào)用函數(shù)
console.log(a);
//sichuan

2）var聲明提升（hoist）

如下，結(jié)果是undefined而并沒有報(bào)錯(cuò)，是因?yàn)?，使用var關(guān)鍵字聲明的變量，會(huì)自動(dòng)提升到函數(shù)作用域的頂部。也就是，會(huì)被ECMAScript看作

function test(){
   console.log(a)
   var a=12;
}
test()
//undefined

也就是，會(huì)被ECMAScript看作

function test(){
   var a; 
   console.log(a)
   a=12;
}
test()
//undefined

這種“提升”，會(huì)把所有變量的聲明都提到函數(shù)作用域的頂部。

（二）let

Let和var作用相似，只是let聲明的范圍是塊作用域，var聲明的范圍是函數(shù)作用域

例如如下的if語句中的{}就是一個(gè)“塊”，而不是一個(gè)函數(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

此時(shí)b在if外邊（定義b的塊作用域外）便不能被引用。

！??！注意：塊作用域是函數(shù)作用域的子域（是前者不一定是后者是后者不一定是前者）。

?。?！注意：適用于var的作用域限制，對let是等同的（只是一個(gè)作用域是函數(shù)作用域一個(gè)是塊作用域）。

關(guān)于重復(fù)聲明，var不報(bào)錯(cuò)而let會(huì)報(bào)錯(cuò)，看如下實(shí)例：

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//運(yùn)行到此處就已經(jīng)報(bào)錯(cuò)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
//運(yùn)行到此處就已經(jīng)報(bào)錯(cuò)
let b=8;
console.log(b);

關(guān)于嵌套使用，JavaScript會(huì)記錄用于變量聲明的標(biāo)識(shí)符以及其所在塊的作用域，所以在嵌套使用時(shí)，不會(huì)報(bào)錯(cuò)（因?yàn)樵谕粔K作用域中沒有重復(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聲明的變量不會(huì)再作用域中被提升，這一現(xiàn)象被稱為“暫時(shí)性死區(qū)”

console.log(a);
var a=2;//undefined
console.log(b);
let b=3;//ReferenceError: Cannot access 'b' before initialization

2）全局聲明

Var在全局作用域中聲明出的變量自動(dòng)會(huì)成為window對象的屬性，但let不會(huì)

var a=3;
console.log(window.a)//a
let b=10;
console.log(window.b);//undefined

不過let聲明出的變量，依舊是全局作用域發(fā)生的（不然也不會(huì)是“undeifned”），變量也會(huì)在頁面的生命周期內(nèi)存續(xù)，所以必須保證頁面不會(huì)重復(fù)聲明同一個(gè)變量

（三）Const

基本上和let相同，只是使用const時(shí)，必須同時(shí)初始化變量，且嘗試修改const聲明的變量時(shí)會(huì)報(bào)錯(cuò)

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)聲明的限制，只適用于它指向的變量本身的引用，也就是說，若為一個(gè)對象，那么修改這一對象內(nèi)部屬性，不會(huì)違反const有關(guān)的限制。

const house={};

house.name=”myhouse”;

那么，在let和const出現(xiàn)之后，許多開發(fā)者不再很多地使用var了，多使用let和const，使得變量有了明確的作用域、聲明位置以及不變的值。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!        

最新評(píng)論