let 和 const 命令
1. let命令
基本用法
ES6 新增了let命令,用來聲明變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內(nèi)有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
for循環(huán)的計數(shù)器,就很合適使用let命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
下面的代碼如果使用var,最后輸出的是10
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
上面代碼中,變量i是var命令聲明的,在全局范圍內(nèi)都有效,所以全局只有一個變量i。每一次循環(huán),變量i的值都會發(fā)生改變,而循環(huán)內(nèi)被賦給數(shù)組a的函數(shù)內(nèi)部的console.log(i),里面的i指向的就是全局的i。也就是說,所有數(shù)組a的成員里面的i,指向的都是同一個i,導(dǎo)致運行時輸出的是最后一輪的i的值,也就是 10。
如果使用let,聲明的變量僅在塊級作用域內(nèi)有效,最后輸出的是 6。
不存在變量提升
var命令會發(fā)生”變量提升“現(xiàn)象,即變量可以在聲明之前使用,值為undefined。這種現(xiàn)象多多少少是有些奇怪的,按照一般的邏輯,變量應(yīng)該在聲明語句之后才可以使用。
為了糾正這種現(xiàn)象,let命令改變了語法行為,它所聲明的變量一定要在聲明后使用,否則報錯
// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;
// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;
暫時性死區(qū)
只要塊級作用域內(nèi)存在let命令,它所聲明的變量就“綁定”(binding)這個區(qū)域,不再受外部的影響。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
上面代碼中,存在全局變量tmp,但是塊級作用域內(nèi)let又聲明了一個局部變量tmp,導(dǎo)致后者綁定這個塊級作用域,所以在let聲明變量前,對tmp賦值會報錯。
ES6 明確規(guī)定,如果區(qū)塊中存在let和const命令,這個區(qū)塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯.
在代碼塊內(nèi),使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱為“暫時性死區(qū)”(temporal dead zone,簡稱 TDZ)。
if (true) {
// TDZ開始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ結(jié)束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
上面代碼中,在let命令聲明變量tmp之前,都屬于變量tmp的“死區(qū)”。
“暫時性死區(qū)”也意味著typeof不再是一個百分之百安全的操作。
typeof x; // ReferenceError
let x;
有些“死區(qū)”比較隱蔽,不太容易發(fā)現(xiàn)。
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 報錯
上面代碼中,調(diào)用bar函數(shù)之所以報錯(某些實現(xiàn)可能不報錯),是因為參數(shù)x默認(rèn)值等于另一個參數(shù)y,而此時y還沒有聲明,屬于”死區(qū)“。如果y的默認(rèn)值是x,就不會報錯,因為此時x已經(jīng)聲明了。
另外,下面的代碼也會報錯,與var的行為不同。
// 不報錯
var x = x;
// 報錯
let x = x;
// ReferenceError: x is not defined
上面代碼報錯,也是因為暫時性死區(qū)。使用let聲明變量時,只要變量在還沒有聲明完成前使用,就會報錯。上面這行就屬于這個情況,在變量x的聲明語句還沒有執(zhí)行完成前,就去取x的值,導(dǎo)致報錯”x 未定義“。
不允許重復(fù)聲明
let不允許在相同作用域內(nèi),重復(fù)聲明同一個變量。
// 報錯
function func() {
let a = 10;
var a = 1;
}
// 報錯
function func() {
let a = 10;
let a = 1;
}
總結(jié)
let的要點:
- 不存在變量提升
- 暫時性死區(qū)
- 不允許重復(fù)聲明
轉(zhuǎn)自 阮一峰 ECMAScript 6 入門