一、var

在ES5中，頂層對象的屬性和全局變量是等價的，用var聲明的變量既是全局變量，也是頂層變量

注意：頂層對象，在瀏覽器環(huán)境指的是window對象，在 Node 指的是global對象

var a =10;console.log(window.a)//10使用var聲明的變量存在變量提升的情況

console.log(a)// undefinedvar a =20在編譯階段，編譯器會將其變成以下執(zhí)行

var aconsole.log(a)a =20使用var，我們能夠?qū)σ粋€變量進行多次聲明，后面聲明的變量會覆蓋前面的變量聲明

var a =20var a =30console.log(a)//30在函數(shù)中使用使用var聲明變量時候，該變量是局部的

var a =20functionchange(){var a =30}change()console.log(a)//20而如果在函數(shù)內(nèi)不使用var，該變量是全局的

var a =20functionchange(){ a =30}change()console.log(a)//30二、let

let是ES6新增的命令，用來聲明變量

用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效

{let a =20}console.log(a)// ReferenceError: a is not defined.不存在變量提升

console.log(a)//報錯ReferenceErrorlet a =2這表示在聲明它之前，變量a是不存在的，這時如果用到它，就會拋出一個錯誤

只要塊級作用域內(nèi)存在let命令，這個區(qū)域就不再受外部影響

var a =123if (true){ a ='abc'// ReferenceErrorlet a;}使用let聲明變量前，該變量都不可用，也就是大家常說的“暫時性死區(qū)”

最后，let不允許在相同作用域中重復聲明

let a =20let a =30// Uncaught SyntaxError: Identifier 'a' has already been declared注意的是相同作用域，下面這種情況是不會報錯的

let a =20{let a =30}因此，我們不能在函數(shù)內(nèi)部重新聲明參數(shù)

functionfunc(arg){let arg;}func()// Uncaught SyntaxError: Identifier 'arg' has already been declared三、const

const聲明一個只讀的常量，一旦聲明，常量的值就不能改變

const a =1a =3// TypeError: Assignment to constant variable.這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值

const a;// SyntaxError: Missing initializer in const declaration如果之前用var或let聲明過變量，再用const聲明同樣會報錯

var a =20let b =20const a =30const b =30//都會報錯const實際上保證的并不是變量的值不得改動，而是變量指向的那個內(nèi)存地址所保存的數(shù)據(jù)不得改動

對于簡單類型的數(shù)據(jù)，值就保存在變量指向的那個內(nèi)存地址，因此等同于常量

對于復雜類型的數(shù)據(jù)，變量指向的內(nèi)存地址，保存的只是一個指向?qū)嶋H數(shù)據(jù)的指針，const只能保證這個指針是固定的，并不能確保改變量的結構不變

const foo ={};//為 foo 添加一個屬性，可以成功foo.prop =123;foo.prop //123//將 foo 指向另一個對象，就會報錯foo ={};// TypeError:"foo" is read-only其它情況，const與let一致

四、區(qū)別

var、let、const三者區(qū)別可以圍繞下面五點展開：

變量提升暫時性死區(qū)塊級作用域重復聲明修改聲明的變量使用變量提升

var聲明的變量存在變量提升，即變量可以在聲明之前調(diào)用，值為undefined

let和const不存在變量提升，即它們所聲明的變量一定要在聲明后使用，否則報錯

// varconsole.log(a)// undefinedvar a =10// let console.log(b)// Cannot access 'b' before initializationlet b =10// constconsole.log(c)// Cannot access 'c' before initializationconst c =10暫時性死區(qū)

var不存在暫時性死區(qū)

let和const存在暫時性死區(qū)，只有等到聲明變量的那一行代碼出現(xiàn)，才可以獲取和使用該變量

// varconsole.log(a)// undefinedvar a =10// letconsole.log(b)// Cannot access 'b' before initializationlet b =10// constconsole.log(c)// Cannot access 'c' before initializationconst c =10塊級作用域

var不存在塊級作用域

let和const存在塊級作用域

// var{var a =20}console.log(a)//20// let{let b =20}console.log(b)// Uncaught ReferenceError: b is not defined// const{const c =20}console.log(c)// Uncaught ReferenceError: c is not defined重復聲明

var允許重復聲明變量

let和const在同一作用域不允許重復聲明變量

// varvar a =10var a =20//20// letlet b =10let b =20// Identifier 'b' has already been declared// constconst c =10const c =20// Identifier 'c' has already been declared修改聲明的變量

var和let可以

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變

// varvar a =10a =20console.log(a)//20//letlet b =10b =20console.log(b)//20// constconst c =10c =20console.log(c)// Uncaught TypeError: Assignment to constant variable使用

能用const的情況盡量使用const，其他情況下大多數(shù)使用let，避免使用var

參考文獻

https://es6.ruanyifeng.com/