前言：

var是JavaScript剛出現(xiàn)時(shí)就存在的變量聲明關(guān)鍵字，而let作為ES6才出現(xiàn)的變量聲明關(guān)鍵字，無疑兩者之間存在著很大的區(qū)別。那么具體有哪些區(qū)別呢？

1.作用域表現(xiàn)形式不同

var是函數(shù)作用域，let是塊級(jí)作用域

{
  var monkey='熏悟空';
  let pig='豬扒蓋';    
}
console.log(monkey); //輸出undefined
console.log(pig); //報(bào)錯(cuò)：pig is not deined

由上面代碼可見，let聲明的變量只在其所在的代碼塊有效，在代碼塊外部無效無法訪問，而var聲明的變量在該代碼塊所在的函數(shù)作用域內(nèi)都有效。

2.是否變量提升的區(qū)別

var聲明的變量會(huì)進(jìn)行變量提升，let聲明的變量不會(huì)進(jìn)行變量提升。

console.log(monkey); //undefined
var monkey='熏悟空';

console.log(pig); //報(bào)錯(cuò)：pig is not defined
let pig='豬扒蓋'; 

同樣的邏輯，為什么var聲明的變量在它聲明之前調(diào)用會(huì)顯示未定義，而let聲明的變量在聲明之前調(diào)用會(huì)拋出異常呢，這就是兩者在變量提升上的區(qū)別，var聲明的變量存在變量提升，let聲明的變量不存在變量提升。

那么什么叫變量提升呢，我這里不做概念性的描述，我只說我個(gè)人的理解，就是以上代碼實(shí)際上相當(dāng)于如下：

var monkey;

console.log(monkey); //undefined
monkey='熏悟空';

console.log(pig); //報(bào)錯(cuò)：pig is not defined
let pig='豬扒蓋'; 

看見區(qū)別了嗎，var聲明的變量會(huì)將聲明的變量提取到作用域的最上面進(jìn)行定義但不賦值，賦值操作還是在你的代碼處，所以你在調(diào)用var聲明的變量時(shí)就是一個(gè)已經(jīng)聲明但是并未定義值的變量，所以調(diào)用結(jié)果就是undefined，這就是所謂的變量提升。而let定義的變量不存在這種變量提升。

3.暫時(shí)性死區(qū)上的區(qū)別

暫時(shí)性死區(qū)：如果在某一作用域內(nèi)let了一個(gè)變量，如果外部作用域中有相同名稱的變量，那么就算在作用域內(nèi)進(jìn)行了更改，也不會(huì)影響到外部作用域

具體表現(xiàn)如下：

for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}
for(let i=0;i<5;i++){
  setTimeout(function(){
     console.log(i)          
  },1000)  
}

請(qǐng)問這兩處代碼的運(yùn)行結(jié)果分別是什么？

第一處代碼運(yùn)行完畢的結(jié)果是1s后順序打印5個(gè)5；第二處代碼運(yùn)行完畢的結(jié)果是1s后順序打印0,1,2,3,4。

請(qǐng)問為什么會(huì)存在這種區(qū)別？

因?yàn)榈谝惶幋a的變量i由var關(guān)鍵字聲明，不存在關(guān)鍵性死區(qū)，即你在1s后setTimeout中訪問到的變量i是全局上下文中for循環(huán)運(yùn)行完畢之后的i,所以打印的結(jié)果全是5；

而第二處代碼的變量i由let關(guān)鍵字聲明，產(chǎn)生了關(guān)鍵性死區(qū)，存在setTimeout中的i變量是你當(dāng)時(shí)存儲(chǔ)時(shí)的i的值，這個(gè)存儲(chǔ)區(qū)間的i不會(huì)因?yàn)橥饷嬗邢嗤膇變量且賦了不同的值而改變，他依舊是之前存儲(chǔ)進(jìn)去的值，這就是暫時(shí)性死區(qū)的表現(xiàn)，也是為什么第二處代碼運(yùn)行完畢是順序打印0,1,2,3,4的原因。

4.在同一個(gè)上下文中var可以重復(fù)聲明，let不行

let monkey='熏悟空';
let monkey='逼馬吻'; //報(bào)錯(cuò)：Identifier 'a' has already been declared
var pig='豬扒蓋';
var pig='豬肛裂';  //正常訪問，變量pig的值被替換

到此這篇關(guān)于JavaScript中var與let的區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript中var與let內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論