1. 程式人生 > >《ECMAScript 6入門》筆記1

《ECMAScript 6入門》筆記1

let命令:用法類似於var,但是所宣告的變數,只在let命令所在的程式碼塊內有效。

基本用法

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

下面的程式碼如果使用var,最後輸出的是10。
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面的程式碼中,變數i是var命令宣告的,在全域性範圍內都有效,所以全域性只有一個變數i。每一次迴圈,變數i的值都會發生改變,而迴圈內被賦值給陣列a的函式內部的console.log(i),裡面的i指向的就是全域性的i。也就是說,所有陣列a的成員裡面的i,指向的都是同一個i,導致執行時輸出的是最後一輪的i的值,也就是10。

如果使用let,宣告的變數僅在塊級作用域內有效,最後輸出的是6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面的程式碼中,變數i是let宣告的,當前的i只在本輪迴圈有效,所以每一次迴圈的i其實都是一個新的變數,所以最後輸出的是6。你可能會問,如果每一輪迴圈的變數i都是重新宣告的,那它怎麼知道上一輪迴圈的值,從而計算出本輪迴圈的值?這是因為JavaScript引擎內部會記住上一輪迴圈的值,初始化本輪的變數i時,就在上一輪迴圈的基礎上進行計算。

另外,for迴圈還有一個特別之處,就是設定迴圈變數的那部分是一個父作用域,而迴圈體內部是一個單獨的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面程式碼正確執行,輸出了3次abc。這表明函式內部的變數i與迴圈變數i不在同一個作用域,有各自單獨的作用域。

不存在變數提升

var命令會發生“變數提升”現象,即變數可以在宣告之前使用,值為undefined。

為了糾正這種現象,let命令改變了語法行為,它所宣告的變數一定要在聲明後使用,否則報錯。

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

上面程式碼中,變數foo用var命令宣告,會發生變數提升,即指令碼開始執行時,變數foo已經存在了,但是沒有值,所以會輸出undefined。變數bar用let命令宣告,不會發生變數提升。這表明在宣告它之前,變數bar是不存在的,這時如果用到它,就會丟擲一個錯誤。

暫時性死區

只要塊級作用域記憶體在let命令,它所宣告的變數就“繫結”(binding)這個區域,不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面程式碼中,存在全域性變數tmp,但是塊級作用域內let又聲明瞭一個區域性變數tmp,導致後者繫結這個塊級作用域,所以在let宣告變數前,對tmp賦值就會報錯。

ES6明確規定,如果區塊中存在let和const命令,這個區塊對這些命令宣告的變數,從一開始就形成了封閉作用域。凡是在宣告之前就使用這些變數,就會報錯。

總之,在程式碼塊內,使用let命令宣告變數之前,該變數都是不可用的。這在語法上,稱為“暫時性死區”(temporal dead zone)。

if (true) {
  // TDZ開始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ結束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

“暫時性死區”也意味著typeof不再是一個百分之百安全的操作。
typeof x; // ReferenceError
let x;

上面程式碼中,變數x使用let命令宣告,所以在宣告之前,都屬於x的“死區”,只要用到該變數就會報錯。因此,typeof執行時就會丟擲一個ReferenceError。

作為比較,如果一個變數根本沒有被宣告,使用typeof反而不會報錯。

typeof undeclared_variable // "undefined"

有些“死區”比較隱蔽,不太容易發現。
function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 報錯

上面程式碼中,呼叫bar函式之所以報錯(某些實現可能不報錯),是因為引數x預設值等於另一個引數y,而此時y還沒有宣告,屬於“死區”。如果y的預設值是x,就不會報錯,因為此時x已經聲明瞭。
function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

另外,下面的程式碼也會報錯,與var的行為不同。
// 不報錯
var x = x;

// 報錯
let x = x;
// ReferenceError: x is not defined

上面程式碼報錯,也是因為暫時性死區。使用let宣告變數時,只要變數在還沒有宣告完成前使用,就會報錯。上面這行就屬於這個情況,在變數x的宣告語句還沒有執行完成前,就去取x的值,導致報錯“x未定義”。

ES6規定暫時性死區和let、const語句不出現變數提升,主要是為了減少執行時錯誤,防止在變數宣告前就使用這個變數,從而導致意料之外的行為。這樣的錯誤在ES5是很常見的,現在有了這種規定,避免此類錯誤就很容易了。

總之,暫時性死區的本質就是,只要一進入當前作用域,所要使用的變數就已經存在了,但是不可獲取,只有等到宣告變數的那一行程式碼出現,才可以獲取和使用該變數。

不允許重複宣告

let不允許在相同作用域內,重複宣告同一個變數。

// 報錯
function () {
  let a = 10;
  var a = 1;
}

// 報錯
function () {
  let a = 10;
  let a = 1;
}

因此,不能在函式內部重新宣告引數。
function func(arg) {
  let arg; // 報錯
}

function func(arg) {
  {
    let arg; // 不報錯
  }
}