var
在ES5中,頂層對象的屬性和全局變量是等價的,用var
聲明的變量即是全局變量,也是頂層變量
頂層對象,在瀏覽器換種中指的是window
對象,在Node
指定的是global
對象
vara a = 10;
console.log(window.a) // 10
//使用var聲明的變量存在變量提升的情況
console.log(b) //undefined
var b = 20;
//在編譯階段,編譯器會將其變成一下執行
var b
console.log(b)
b = 20
//使用var,能夠對一個變量進行多次聲明,后面聲明的變量會覆蓋前面聲明的變量
var d = 20;
var d = 30;
console.log(d) //30
//在函數中使用var聲明變量的時候,該變量是局部變量
var e = 20;
function change(){
var e = 30;
}
change()
console.log(e) // 20
//如果在函數的內部不適用var,該變量是全局的
var f = 20
function change(){
f = 30
}
change()
console.log(f) // 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.prop = 123;
foo.prop //123
//將foo指向另一個對象,就會報錯
foo = {};//TypeError: "foo" is read-only
區別
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