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

小路亞發表於2021-06-21

一、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

letES6新增的命令,用來宣告變數

用法類似於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

如果之前用varlet宣告過變數,再用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

其它情況,constlet一致

四、區別

varletconst三者區別可以圍繞下面五點展開:

  • 變數提升
  • 暫時性死區
  • 塊級作用域
  • 重複宣告
  • 修改宣告的變數
  • 使用

4.1 變數提升

var`宣告的變數存在變數提升,即變數可以在宣告之前呼叫,值為`undefined

letconst不存在變數提升,即它們所宣告的變數一定要在宣告後使用,否則報錯

// 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

4.2 暫時性死區

var不存在暫時性死區

letconst存在暫時性死區,只有等到宣告變數的那一行程式碼出現,才可以獲取和使用該變數

// 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

4.3 塊級作用域

var不存在塊級作用域

letconst存在塊級作用域

// 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

4.4 重複宣告

var允許重複宣告變數

letconst在同一作用域不允許重複宣告變數

// 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

4.5 修改宣告的變數

varlet可以

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

4.6 使用

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

相關文章