ECMAScript 6-Let與Const

阿新 • • 發佈：2020-09-01

let和const命令

Let

宣告的變數只在let命令所在的程式碼塊內有效

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

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

for迴圈

for (let i = 0; i < 10; i++) {}
console.log(i);		//i is not defined

對比

//var宣告時
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
//解析：i是var宣告的全域性變數。迴圈內i被賦給陣列a的function在執行時，通過閉包會讀到同一個變數i，導致最後輸出的是最後一輪的i的值，也就是10

//let宣告時
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6
//解析：let宣告的i僅在塊級作用域內有效。當前的i只在本輪迴圈有效，所以每一次迴圈的i其實都是一個新的變數

迴圈語句是一個父作用域，迴圈體內部是一個單獨的子作用域。函式內部的變數i和外部的變數i是分離

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

不存在變數提升

var宣告的變數可以在宣告之前使用，預解析會把宣告提前，即變數提升。

console.log(bar)	//undefined
var bar=1

//實際上var變數提升了
var bar
console.log(bar)	//undefined
a=1

而let所宣告的變數一定要在聲明後使用，否則報錯

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

暫時性死區

一旦某區塊存在let命令，這個區塊就對該變數形成封閉作用域。凡是在宣告之前就使用這些變數，就會報錯。這在語法上稱為暫時性死區（temporal dead zone，簡稱 TDZ）

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

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

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

不允許重複宣告

//不允許在相同作用域內重複宣告同一個變數
function () {
  let a = 10;
  var a = 1;
}	//報錯

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

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

塊級作用域

//ES6 允許塊級作用域的任意巢狀
{{{{{let insane = 'Hello World'}}}}};

//外層作用域無法讀取內層作用域的變數
{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 報錯
}}}};

//內層作用域可以定義外層作用域的同名變數
{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

塊級作用域與函式宣告

在ES5中：

function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    function f() { console.log('I am inside!'); }// 重複宣告一次函式f
  }
  f();		//“I am inside!”
}());

為什麼呢？實際上，在if內宣告的函式f會被提升到函式頭部，如下

function f() { console.log('I am outside!'); }
(function () {
  function f() { console.log('I am inside!'); }
  if (false) {}
  f();		//“I am inside!”
}());

在es6中：

es6規定：允許在塊級作用域之中宣告函式，行為類似於let，在塊級作用域之外不可引用
```
function f() { console.log('I am outside!'); }

(function () {
 if (false) {
     function f() { console.log('I am inside!'); }
 }
f();
}());
```
這理論上會得到“I am outside!”。但是如果改變了塊級作用域內宣告的函式的處理規則，顯然會對老程式碼產生很大影響。為了減輕因此產生的不相容問題，ES6在附錄B裡面規定，瀏覽器的實現可以不遵守上面的規定，有自己的行為方式。

允許在塊級作用域內宣告函式，類似於var，即會提升到全域性作用域、函式作用域或所在塊級作用域的頭部

規則只對 ES6 的瀏覽器實現有效，其他環境的實現不用遵守，還是將塊級作用域的函式聲明當作let處理，根據瀏覽器的 ES6 環境規則：
```
function f() { console.log('I am outside!'); }
(function () {
    if (false) {
        function f() { console.log('I am inside!'); }
    }
    f();		//f is not a function
}());

//因為實際上執行的是
function f() { console.log('I am outside!'); }
(function () {
    var f = undefined;
    if (false) {
        function f() { console.log('I am inside!'); }
    }
    f();
}());
```
考慮到環境導致的行為差異太大，應該避免在塊級作用域內宣告函式。如果確實需要，也應該寫成函式表示式，而不是函式宣告語句
```
// 函式宣告語句---不推薦
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函式表示式---推薦
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}
```

do 表示式

塊級作用域是一個語句，沒有返回值

{
  let t = f();
  t = t * t + 1;
}		//無返回值

通過do把塊級作用域變為do表示式，也就是說可以返回值

let x = do {
  let t = f();
  t * t + 1;
};		//變數x會得到整個塊級作用域的返回值

Const 命令

特性

const宣告一個只讀的常量，一旦宣告，常量的值就不能改變，且必須立即初始化，不能留到以後賦值。
const命令宣告的常量也是不提升，同樣存在暫時性死區，只能在宣告的位置後面使用。也與let一樣不可重複宣告

本質

const實際上保證的，並不是變數的值不得改動，而是變數指向的那個記憶體地址不得改動。
對於簡單型別的資料（數值、字串、布林值），值就儲存在變數指向的那個記憶體地址，因此等同於常量。
但對於複合型別的資料（主要是物件和陣列），變數指向的記憶體地址，const只能保證這個指標是固定的，不能控制資料結構
```
const foo = {};

// 為 foo 新增一個屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個物件，就會報錯
foo = {}; // TypeError: "foo" is read-only
```
如果真的想將物件凍結，應該使用Object.freeze方法
```
const foo = Object.freeze({});
```

ES6 宣告變數的六種方法

ES5 只有兩種宣告變數的方法：var命令和function命令
E6除了新增let和const命令；import命令和class命令

頂級物件的屬性

頂層物件，在瀏覽器環境指的是window物件，在Node指的是global物件。ES5之中，頂層物件的屬性與全域性變數是等價的

window.a = 1;
a // 1

a = 2;
window.a // 2

但這樣會帶來很多問題：

首先是沒法在編譯時就報出變數未宣告的錯誤，只有執行時才能知道（因為全域性變數可能是頂層物件的屬性創造的，而屬性的創造是動態的）
程式設計師很容易不知不覺地就建立了全域性變數
頂層物件的屬性是到處可以讀寫的，這非常不利於模組化程式設計
window物件有實體含義，指的是瀏覽器的視窗物件，不合適。

為了解決這些問題，ES6規定

var命令和function命令宣告的全域性變數，依舊是頂層物件的屬性；另一方面規定，let命令、const命令、class命令宣告的全域性變數，不屬於頂層物件的屬性。也就是說，從ES6開始，全域性變數將逐步與頂層物件的屬性脫鉤。

var a = 1;
// 如果在Node的REPL環境，可以寫成global.a
// 或者採用通用方法，寫成this.a
window.a // 1

let b = 1;
window.b // undefined

global物件

ES5的頂層物件，本身也是一個問題，因為它在各種實現裡面是不統一的。

瀏覽器裡面，頂層物件是window，但 Node 和 Web Worker 沒有window。
瀏覽器和 Web Worker 裡面，self也指向頂層物件，但是Node沒有self。
Node 裡面，頂層物件是global，但其他環境都不支援。

同一段程式碼為了能夠在各種環境都能取到頂層物件，一般使用this變數，但是有侷限性

全域性環境中，this會返回頂層物件。但是，Node模組和ES6模組中，this返回的是當前模組。
函式裡面的this，如果函式不是作為物件的方法執行，而是單純作為函式執行，this會指向頂層物件。但是，嚴格模式下，這時this會返回undefined。
不管是嚴格模式，還是普通模式，new Function('return this')()，總是會返回全域性物件。但是，如果瀏覽器用了CSP（Content Security Policy，內容安全政策），那麼eval、new Function這些方法都可能無法使用。