前言

JavaScript中一共有3種用來(lái)聲明變量的關(guān)鍵字，分別是var、let和const。

其中var關(guān)鍵字是ES5時(shí)代的產(chǎn)物，由于ES5對(duì)變量的約束很寬松，使用var來(lái)聲明變量時(shí)經(jīng)常會(huì)出現(xiàn)一些預(yù)料之外的問(wèn)題。 ES6為了使變量的定義更加規(guī)范，提出了let和const這兩個(gè)關(guān)鍵字。

因此要解釋清楚這三個(gè)的區(qū)別，首先要從ES5時(shí)代和ES6時(shí)代的差別說(shuō)起，主要是var和let的區(qū)別。

ES5與ES6的區(qū)別

1. 作用域

使用不同的關(guān)鍵字來(lái)聲明變量，主要就是對(duì)變量的作用域有不同的限制，因此var和let最主要的區(qū)別就是變量作用域的區(qū)別。

• var聲明的范圍是函數(shù)作用域，函數(shù)體之外無(wú)法訪問(wèn)到函數(shù)體內(nèi)聲明的var變量。

做題的時(shí)候經(jīng)常會(huì)有在全局和函數(shù)體內(nèi)聲明同名變量的場(chǎng)景，要知道不同作用域的變量是不會(huì)互相干擾的。

var a = 10;
function logA() {
    var a = 20;
    console.log(a); // 20
}
console.log(a); // 10

• let聲明的范圍是塊作用域，塊作用域是函數(shù)作用域的子集，可以使用花括號(hào){...}來(lái)限定塊級(jí)作用域。

2. 全局屬性

在全局作用域下使用var和let聲明變量，變量都是會(huì)在頁(yè)面的聲明周期內(nèi)存續(xù)。

但是使用var聲明的變量會(huì)成為window對(duì)象的屬性，使用let聲明則不會(huì)。

3. 變量提升與暫時(shí)性死區(qū)

• var聲明存在變量提升的行為。

變量的聲明、初始化和賦值被分為三步進(jìn)行，對(duì)于var變量，聲明和初始化會(huì)被提升到作用域的頂部。

也就是說(shuō)，編譯器在遇到var聲明時(shí)，會(huì)先在作用域頂部聲明一個(gè)var變量并將其初始化為undefined值。

因此在代碼執(zhí)行流遇到var聲明語(yǔ)句之前訪問(wèn)var變量并不會(huì)報(bào)錯(cuò)，而是會(huì)訪問(wèn)到undefined值。

(function example() {
  console.log(age); // undefined
  var age = 20;
})();

// 相當(dāng)于
(function example() {
  var age;
  console.log(age); // undefined
  age = 20;
})();

• ES6對(duì)先訪問(wèn)后聲明變量的行為做了約束，因此let和const聲明會(huì)存在TDZ暫時(shí)性死區(qū)。

即JavaScript引擎在編譯時(shí)如果遇到let和const聲明，會(huì)將它們放入暫時(shí)性死區(qū)以阻止訪問(wèn)，只有在執(zhí)行到變量聲明的語(yǔ)句后，才會(huì)將變量從TDZ中移出。

因此如果在變量聲明語(yǔ)句之前訪問(wèn)變量，相當(dāng)于企圖訪問(wèn)TDZ中的變量，JavaScript會(huì)拋出運(yùn)行時(shí)錯(cuò)誤ReferenceError。

ES5的變量提升和ES6的暫時(shí)性死區(qū)的區(qū)別還有一個(gè)“副作用”就是改變了typeof操作對(duì)于變量的訪問(wèn)性。

已知在ES5時(shí)對(duì)于未聲明變量唯一的安全操作是typeof，會(huì)返回undefined值。

TDZ的出現(xiàn)導(dǎo)致即使使用typeof，也不能在let和const聲明語(yǔ)句執(zhí)行之前訪問(wèn)let和const變量，依然會(huì)報(bào)ReferenceError。

4. 重復(fù)聲明

• var聲明是允許重復(fù)的，可以重復(fù)使用var關(guān)鍵字來(lái)聲明同名變量，后來(lái)聲明的變量值會(huì)覆蓋之前的值。
• 為了阻止重復(fù)聲明變量這個(gè)容易讓人迷惑的行為，ES6限制了let和const聲明的變量都是不可重復(fù)的，如果重復(fù)聲明會(huì)報(bào)SyntaxError錯(cuò)誤。

這個(gè)限制不僅體現(xiàn)在let聲明對(duì)let聲明，如果想用let去重復(fù)聲明var變量也是不被允許的。

let與const的區(qū)別

1. 常量

同樣都是ES6的變量聲明關(guān)鍵字，let和const的區(qū)別就在于使用const聲明創(chuàng)建的是一個(gè)值的只讀引用。

只讀引用意味著對(duì)于原始值來(lái)說(shuō)，const聲明不可以再重新賦值；

對(duì)于引用值來(lái)說(shuō)，const聲明不可以再修改引用，但是可以修改對(duì)象的屬性值或者數(shù)組內(nèi)部的值。

最佳實(shí)踐

• 盡量不使用var。因?yàn)閘et和const已經(jīng)可以替代var的位置，滿足開(kāi)發(fā)需求，順便還規(guī)避了很多不必要的問(wèn)題。
• 優(yōu)先使用const聲明，let聲明次之。const聲明有點(diǎn)像保護(hù)變量的機(jī)制，它能預(yù)防和阻止預(yù)期之外的變量修改。 對(duì)于有修改需求的變量，就使用let聲明。

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

最新評(píng)論