所有內(nèi)容基于阮一峰的ECMAScript 6 入門(mén)

1.let命令

只在命令所在的代碼塊內(nèi)有效。
for循環(huán)有一個(gè)特別之處，循環(huán)語(yǔ)句部分是一個(gè)父作用域，而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域。

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

不存在變量提升

暫時(shí)性死區(qū)（temporal dead zone，簡(jiǎn)稱TDZ）

ar tmp = 123;

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

// 報(bào)錯(cuò)
let x = x;
// ReferenceError: x is not defined

在變量x的聲明語(yǔ)句還沒(méi)執(zhí)行完成前，就去取x的值導(dǎo)致報(bào)錯(cuò)“x未定義”。

不允許重復(fù)聲明

不能在函數(shù)內(nèi)部重新聲明參數(shù)

function func(arg) {
  let arg; // 報(bào)錯(cuò)
}

function func(arg) {
  {
    let arg; // 不報(bào)錯(cuò)
  }
}

2.塊級(jí)作用域

為什么需要塊級(jí)作用域

1.內(nèi)層變量可能會(huì)覆蓋外層變量
2.用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量

ES6的塊級(jí)作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

外層作用域無(wú)法讀取內(nèi)層作用域的變量。
內(nèi)層作用域可以定義外層作用域的同名變量。
塊級(jí)作用域的出現(xiàn)，實(shí)際上使得獲得廣泛應(yīng)用的立即執(zhí)行函數(shù)表達(dá)式（IIFE）不必要了。

// IIFE 寫(xiě)法
（function （）{
    var tmp = ...;
}());
// 塊級(jí)作用域?qū)懛?{
  let tmp = ...;
  ...
}

塊級(jí)作用域與函數(shù)聲明

ES6中允許在塊級(jí)作用域中聲明函數(shù)。
ES6中塊級(jí)作用域內(nèi)聲明的函數(shù)類(lèi)似與let，對(duì)作用域外沒(méi)有影響。
但是為了減輕因此產(chǎn)生的不兼容問(wèn)題，瀏覽器的實(shí)現(xiàn)可以不遵守上面的規(guī)定，有自己的行為方式。

• 允許在塊級(jí)作用域內(nèi)聲明函數(shù)
• 函數(shù)聲明類(lèi)似于var，即會(huì)提升到全局作用域或函數(shù)作用域的頭部
• 同時(shí)，函數(shù)聲明還會(huì)提升到所在的塊級(jí)作用域的頭部。
  上面三條規(guī)則只對(duì)ES6的瀏覽器實(shí)現(xiàn)有效，其他環(huán)境的實(shí)現(xiàn)不用遵守，還是將塊級(jí)作用域的函數(shù)聲明當(dāng)做let處理。

// 瀏覽器的 ES6 環(huán)境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重復(fù)聲明一次函數(shù)f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

上面的代碼在符合 ES6 的瀏覽器中，都會(huì)報(bào)錯(cuò)，因?yàn)閷?shí)際運(yùn)行的是下面的代碼。

// 瀏覽器的 ES6 環(huán)境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

考慮到環(huán)境導(dǎo)致的行為差異太大，應(yīng)該避免在塊級(jí)作用域中聲明函數(shù)。如果確實(shí)需要，也應(yīng)該寫(xiě)成函數(shù)表達(dá)式，而不是函數(shù)聲明語(yǔ)句。

// 函數(shù)聲明語(yǔ)句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函數(shù)表達(dá)式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

另外，還有一個(gè)需要注意的地方，ES6允許塊級(jí)作用域內(nèi)聲明函數(shù)的規(guī)則，只在使用大括號(hào)的情況下成立。

// 不報(bào)錯(cuò)
'use strict';
if (true) {
  function f() {}
}

// 報(bào)錯(cuò)
'use strict';
if (true)
  function f() {}

do 表達(dá)式

本質(zhì)上，塊級(jí)作用域是一個(gè)語(yǔ)句，將多個(gè)操作封裝在一起，沒(méi)有返回值。
現(xiàn)在有一個(gè)提案，使得塊級(jí)作用域可以變?yōu)楸磉_(dá)式，也即是說(shuō)可以返回值：

let x = do {
  let = f()
  t*t+1;
};

上面代碼中，變量x會(huì)得到整個(gè)塊級(jí)作用域的返回值。（只是提案，現(xiàn)在可能還用不了）

3.const 命令

基本用法

const聲明一個(gè)只讀的常量，const一旦聲明就必須立即初始化不能留到以后賦值。
const的作用域與let命令相同：只在聲明所在塊級(jí)作用域內(nèi)有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const命令聲明的常量也不是提升，同樣存在暫時(shí)性死區(qū)，只能在聲明的位置后面使用。
也不能重復(fù)聲明。

本質(zhì)

const實(shí)際上保證的，不是變量的值不變，而是變量指向的那個(gè)內(nèi)存地址不得改變。但對(duì)于復(fù)合類(lèi)型的數(shù)據(jù)（主要是對(duì)象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個(gè)指針，const只能保證這個(gè)指針是固定的，至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。

const foo = {};

// 為 foo 添加一個(gè)屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
foo = {}; // TypeError: "foo" is read-only
const a = [];
a.push('Hello'); // 可執(zhí)行
a.length = 0;    // 可執(zhí)行
a = ['Dave'];    // 報(bào)錯(cuò)

想將對(duì)象凍結(jié)，應(yīng)該使用Object.freeze方法。

const foo = Object.freeze({});

// 常規(guī)模式時(shí)，下面一行不起作用；
// 嚴(yán)格模式時(shí)，該行會(huì)報(bào)錯(cuò)
foo.prop = 123;

ES6聲明變量的六種方法

var命令function命令。
ES6除了添加let和const命令，另外兩種聲明變量的方法：import命令和class命令。

4.頂層對(duì)象的屬性

頂層對(duì)象，瀏覽器環(huán)境指的是window對(duì)象，在Node指的是global對(duì)象。
ES5之中，頂層對(duì)象的屬性與全局變量是等價(jià)的。

window.a = 1;
a // 1

a = 2;
window.a // 2

頂層對(duì)象的屬性與全局變量掛鉤，被認(rèn)為是JavaScript語(yǔ)言最大的設(shè)計(jì)敗筆之一。
ES6為了改變這一點(diǎn)，一方面規(guī)定，為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對(duì)象的屬性；另一方面規(guī)定，let命令、const命令、class命令聲明的全局變量，不屬于頂層對(duì)象的屬性。也就是說(shuō)，從ES6開(kāi)始，全局變量將逐步與頂層對(duì)象的屬性脫鉤。

var a = 1;
// 如果在Node的REPL環(huán)境，可以寫(xiě)成global.a
// 或者采用通用方法，寫(xiě)成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代碼中，全局變量a是var聲明的所以它是頂層對(duì)象的屬性；全局變量b是由let聲明，所以它不是頂層對(duì)象的屬性，返回undefined。

global對(duì)象

ES5的頂層對(duì)象，本身也是一個(gè)問(wèn)題，因?yàn)樗诟鞣N實(shí)現(xiàn)里面是不統(tǒng)一的。

• 瀏覽器里面，頂層對(duì)象是window，但 Node 和 Web Worker 沒(méi)有window。
• 瀏覽器和 Web Worker 里面，self也指向頂層對(duì)象，但是Node沒(méi)有self。
• Node 里面，頂層對(duì)象是global，但其他環(huán)境都不支持。

同一段代碼為了在各種環(huán)境都能取到頂層對(duì)象，現(xiàn)在一般是使用this，但是有局限性。

• 全局環(huán)境中，this會(huì)返回頂層對(duì)象，但是，node模塊和ES6模塊中返回的是當(dāng)前模塊。
• 函數(shù)里面的this，如果函數(shù)不是作為對(duì)象方法運(yùn)行，而是單純作為函數(shù)運(yùn)行，this會(huì)指向頂層對(duì)象。但是在嚴(yán)格模式下，這是this會(huì)返回undefined。
• 不管是嚴(yán)格模式，還是普通模式，new Function（’return this‘）（），總是會(huì)返回全局對(duì)象。但是，如果瀏覽器用來(lái)CSP（Content Security Policy，內(nèi)容安全政策），那么eval，new Function這些方法可能都無(wú)法使用。
  下面是兩種勉強(qiáng)可以在所有情況下取到頂層對(duì)象的方法。

//方法一
(typeof window !== 'undefined'
  ? window
  : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeor global === 'object')
     ? global
      : this);

//方法二
var getGlobal = function () {
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

現(xiàn)在有一個(gè)提案，在語(yǔ)言標(biāo)準(zhǔn)的層面，引入global
作為頂層對(duì)象。也就是說(shuō)，在所有環(huán)境下，global
都是存在的，都可以從它拿到頂層對(duì)象。
墊片庫(kù)system.global
模擬了這個(gè)提案，可以在所有環(huán)境拿到global
。

// CommonJS的寫(xiě)法
require('system.global/shim')();

// ES6模塊的寫(xiě)法
import shim from 'system.global/shim'; shim();

上面代碼可以保證各種環(huán)境里面，global對(duì)象都是存在的。

// CommonJS的寫(xiě)法
var global = require('system.global')();

// ES6模塊的寫(xiě)法
import getGlobal from 'system.global';
const global = getGlobal();

上面代碼將頂層對(duì)象放入變量global。