JavaScript 中的 Var，Let 和 Const 有什麼區別

一、var

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

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

var a = 10;
console.log(window.a) // 10

使用var聲明的變量存在變量提升的情況

console.log(a) // undefined
var a = 20

在編譯階段，編譯器會將其變成以下執行

var a
console.log(a)
a = 20

使用var，我們能夠對一個變量進行多次聲明，後面聲明的變量會覆蓋前面的變量聲明

var a = 20 
var a = 30
console.log(a) // 30

在函數中使用使用var聲明變量時候，該變量是局部的

var a = 20
function change(){
    var a = 30
}
change()
console.log(a) // 20

而如果在函數內不使用var，該變量是全局的

var a = 20
function change(){
   a = 30
}
change()
console.log(a) // 30

二、let

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

用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效

{
    let a = 20
}
console.log(a) // ReferenceError: a is not defined.

不存在變量提升

console.log(a) // 報錯ReferenceError
let a = 2

這表示在聲明它之前，變量a是不存在的，這時如果用到它，就會拋出一個錯誤

只要塊級作用域內存在let命令，這個區域就不再受外部影響

var a = 123
if (true) {
    a = 'abc' // ReferenceError
    let a;
}

使用let聲明變量前，該變量都不可用，也就是大家常說的 “暫時性死區”

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

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared

注意的是相同作用域，下面這種情況是不會報錯的

let a = 20
{
    let a = 30
}

因此，我們不能在函數內部重新聲明參數

function func(arg) {
  let arg;
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared

三、const

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

const a = 1
a = 3
// TypeError: Assignment to constant variable.

這意味着，const一旦聲明變量，就必須立即初始化，不能留到以後賦值

const a;
// SyntaxError: Missing initializer in const declaration

如果之前用var或let聲明過變量，再用const聲明同樣會報錯

var a = 20
let b = 20
const a = 30
const b = 30
// 都會報錯

const實際上保證的並不是變量的值不得改動，而是變量指向的那個內存地址所保存的數據不得改動

對於簡單類型的數據，值就保存在變量指向的那個內存地址，因此等同於常量

對於複雜類型的數據，變量指向的內存地址，保存的只是一個指向實際數據的指針，const只能保證這個指針是固定的，並不能確保改變量的結構不變

const foo = {};

// 爲 foo 添加一個屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個對象，就會報錯
foo = {}; // TypeError: "foo" is read-only

其它情況，const與let一致

四、區別

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

變量提升

var聲明的變量存在變量提升，即變量可以在聲明之前調用，值爲undefined

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

// var
console.log(a)  // undefined
var a = 10

// let 
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

暫時性死區

var不存在暫時性死區

let和const存在暫時性死區，只有等到聲明變量的那一行代碼出現，纔可以獲取和使用該變量

// var
console.log(a)  // undefined
var a = 10

// let
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const 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在同一作用域不允許重複聲明變量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier 'b' has already been declared

// const
const c = 10
const c = 20 // Identifier 'c' has already been declared

修改聲明的變量

var和let可以

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

// var
var a = 10
a = 20
console.log(a)  // 20

//let
let b = 10
b = 20
console.log(b)  // 20

// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

使用

能用const的情況儘量使用const，其他情況下大多數使用let，避免使用var

參考文獻

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/0kOszlpIr6gTUDc2pl0sSw

猜你喜歡