ES6 學(xué)習(xí)筆記-let

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的要點:

  1. 不存在變量提升
  2. 暫時性死區(qū)
  3. 不允許重復(fù)聲明

轉(zhuǎn)自 阮一峰 ECMAScript 6 入門

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容