主要知識(shí)點(diǎn)有：var變量提升、let聲明、const聲明、let和const的比較、塊級(jí)綁定的應(yīng)用場(chǎng)景

1. var聲明以及變量提升

變量提升：使用var聲明變量，變量的創(chuàng)建并不在聲明變量的地方，而是會(huì)在當(dāng)前作用域的頂部。

如果聲明在函數(shù)內(nèi)，則變量的創(chuàng)建則會(huì)在函數(shù)作用域的頂部；如果聲明不在函數(shù)內(nèi)，則會(huì)提升到全局作用域的頂部。

示例

function getValue(condition){if(condition){var value = "yes";return value;}else{//value 在此處可訪問，值為 undefinedreturn null;}//value 在此處可訪問，值為 undefined } 復(fù)制代碼

等價(jià)于（var變量提升到當(dāng)前函數(shù)作用域的頂部）：

function getValue(condition){var value;if(condition){value = "yes";return value;}else{//value 在此處可訪問，值為 undefinedreturn null;}//value 在此處可訪問，值為 undefined } 復(fù)制代碼

由變量提升會(huì)帶來循環(huán)變量過度共享的問題

2. let聲明

與var聲明變量語法一致，但是let聲明變量不會(huì)變量提升，變量的作用域只會(huì)限制在當(dāng)前代碼塊中。由于let變量并不會(huì)提升到代碼塊的頂部，因此，要想讓整個(gè)代碼塊能給訪問到let變量，需要將let聲明指定到代碼塊的頂部。

示例

function getValue(condition){if(condition){let value = "yes";return value;}else{//value 在此處不可訪問return null;}//value 在此處不可訪問 } 復(fù)制代碼

---

let變量禁止重復(fù)聲明：如果一個(gè)標(biāo)識(shí)符已經(jīng)在代碼塊內(nèi)部中被定義，那么使用let以同樣的標(biāo)識(shí)符聲明變量則會(huì)報(bào)錯(cuò)

示例： var count = 43； let count; //重復(fù)聲明，報(bào)錯(cuò) 復(fù)制代碼

3. const聲明

const聲明基本變量

const聲明：使用const聲明一個(gè)常量，一旦設(shè)置之后就不能再被修改，否則會(huì)報(bào)錯(cuò)。也就是說，使用const聲明變量后要立即初始化。

const type; type='TEST'; //Uncaught SyntaxError: Missing initializer in const declaration正確的為： const type='TEST' ----------------------------- const type='TEST' type = 'DEBUG' //ObjectMethod.html:244 Uncaught TypeError: Assignment to constant variable. 復(fù)制代碼

const聲明對(duì)象

const只會(huì)阻止變量綁定以及變量的修改，但是不會(huì)阻止對(duì)象成員變量的修改。

const person = {name:'nancy'}; person.name= 'nike'; console.log(person.name); //nike person = {}; //Uncaught TypeError: Assignment to constant variable. 復(fù)制代碼

4. let與const的比較

相同點(diǎn)

不存在變量提升：let與const聲明變量都不會(huì)存在變量提升，都只在塊級(jí)作用域內(nèi)，如果試圖在代碼塊外訪問let或者const變量都會(huì)報(bào)錯(cuò)；

禁止重復(fù)聲明：如果在同一作用域內(nèi)，禁止let或者const使用以被定義的標(biāo)識(shí)符聲明變量；

都具有暫時(shí)性死區(qū)（temporal dead zone，TDZ ）：使用let或者const聲明變量，如果在聲明處之前訪問變量會(huì)報(bào)錯(cuò)。在變量當(dāng)前作用域的塊內(nèi)，變量聲明處之前被稱之為TDZ。

不會(huì)覆蓋全局對(duì)象上的屬性：let變量或者const變量會(huì)在全局作用域上創(chuàng)建新的變量，但是不會(huì)綁定到全局對(duì)象上（瀏覽器則是window對(duì)象），而var變量在全局作用域上會(huì)綁定到全局對(duì)象，也就是說，var全局變量可能會(huì)無意覆蓋掉全局對(duì)象上的一些屬性。

var RegExp = 'hello';console.log(window.RegExp); //helloconsole.log(window.RegExp===RegExp); //RegExp覆蓋掉window對(duì)象中的RegExp屬性-------------let RegExp = 'hello';console.log(window.RegExp);console.log(window.RegExp===RegExp); //falsefunction getValue(condition){if(condition){//value的TDZlet value = "yes";return value;}else{return value;}} 復(fù)制代碼

不同點(diǎn)

const不能再賦值，let聲明的變量可以重復(fù)賦值;

5. 塊級(jí)綁定的使用場(chǎng)景

循環(huán)內(nèi)的let聲明

在循環(huán)中使用var變量，由于var變量存在變量提升，每次迭代共享同一個(gè)var變量。

for(var i = 0;i<5;i++){setTimeout(()=>{console.log(i); //輸出5},1000);}console.log(i); //輸出5 復(fù)制代碼

解決方法：將var變量改為let變量

//將var改成let之后for(let i = 0; i < 5; i++) {setTimeout(() => {console.log(i) // 0,1,2,3,4}, 0)}console.log(i)//Uncaught ReferenceError: i is not defined i無法污染外部函數(shù) 復(fù)制代碼

let變量不會(huì)變量提升，let變量作用域不會(huì)逃離出for循環(huán)外，因此不會(huì)污染外部函數(shù)。而在for循環(huán)中也不會(huì)每次迭代都共享同一變量，而是會(huì)分別使用let變量副本。

循環(huán)內(nèi)const聲明

在普通的for循環(huán)中使用const變量，由于const變量不可修改，因此會(huì)報(bào)錯(cuò)。而在for-in或者for-of循環(huán)中可以使用const變量。

let arr = [1,2,3,4];for(const item of arr){console.log(item); //輸出1,2,3,4} 復(fù)制代碼

6. 總結(jié)

let和const變量都不會(huì)進(jìn)行提升，并且只會(huì)在聲明它們的代碼塊內(nèi)部存在。由于變量能夠在必要位置被準(zhǔn)確聲明，其表現(xiàn)更加接近其他語言；

塊級(jí)綁定存在暫時(shí)性死區(qū)（TDZ ） ，試圖在聲明位置之前訪問它就會(huì)導(dǎo)致錯(cuò)誤；

let 與 const 的表現(xiàn)在很多情況下都相似于 var ，然而在循環(huán)中就不是這樣。在 for-in 與 for-of 循環(huán)中， let 與 const 都能在每一次迭代時(shí)創(chuàng)建一個(gè)新的綁定，這意味著在循環(huán)體內(nèi)創(chuàng)建的函數(shù)可以使用當(dāng)前迭代所綁定的循環(huán)變量值（而不是像使用 var 那樣，共享同一變量值）。同時(shí)在基礎(chǔ)的for循環(huán)中，使用const變量會(huì)出錯(cuò)。

最佳實(shí)踐：在默認(rèn)情況下使用 const ，而只在你知道變量值需要被更改的情況下才使用 let 。

總結(jié)

以上是生活随笔為你收集整理的深入理解ES6--1.块级绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。