ES 6の初歩的な理解

ES 6基本命令詳細
1.letコマンド
varに似ていますが、宣言された変数はletコマンドが存在するコードブロック内でのみ有効です.

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

上のコードがvarを使用すると、最後に出力されるのは10です.lerの化で出力したのは6
変数リフトは存在しません
varコマンドでは、宣言前に変数をundefinedの値で使用できる「変数の昇格」現象が発生します.letコマンドは構文動作を変更し、宣言された変数は必ず宣言後に使用します.そうしないと、エラーが発生します.

// var    
console.log(foo); //   undefined
var foo = 2;

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

一時的デッドゾーン
ブロックレベルの役割ドメイン内にletコマンドが存在する限り、宣言された変数は「バインド」(binding)という領域であり、外部の影響を受けません.
ES 6は、ブロックにletコマンドとconstコマンドが存在する場合、このブロックがこれらのコマンドに対して宣言する変数は、最初から閉鎖的な役割ドメインを形成することを明確に規定している.宣言する前にこれらの変数を使用すると、エラーが発生します.

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

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

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

letコマンドが変数tmpを宣言する前に、変数tmpの「デッドゾーン」に属します.
要するに、一時的なデッドゾーンの本質は、現在の役割ドメインに入ると、使用する変数はすでに存在するが、取得できず、変数を宣言する行のコードが現れるまで、その変数を取得して使用することができるということである.
繰り返し宣言は許可されていません
letは、同じ役割ドメイン内で同じ変数を繰り返し宣言することを許さない.

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

2.クロスレベルの役割ドメイン
letは実際にJavaScriptにブロックレベルの役割ドメインを追加しました.変数をletで宣言すればいい

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

ブロックレベルの役割ドメインと関数宣言
ES 6は付録Bに,ブラウザの実現は上記の規定を守らず,独自の行動方式を持つことができると規定されている.

は、ブロックレベルの役割ドメイン内で関数を宣言することを可能にする.

関数宣言はvarと同様であり、グローバル役割ドメインまたは関数役割ドメインのヘッダに昇格する.

同時に、関数宣言は、存在するブロックレベルの役割ドメインのヘッダにも昇格する.

環境による動作の違いが大きいことを考慮すると、ブロックレベルの役割ドメイン内で関数を宣言することは避けるべきです.必要に応じて、関数宣言文ではなく関数式に書く必要があります.

//       
{
  let a = 'secret';
  function f() {
    return a;
  }
}

//      
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

3.constコマンド
基本的な使い方
constは定数を宣言するために使用され、定数値を宣言すると変更できません.

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable

constコマンド宣言の定数も上昇せず、同様に一時的なデッドゾーンが存在し、宣言の位置の後ろでしか使用できません.
constが実際に保証するのは、変数の値が変更できないのではなく、変数が指すメモリアドレスに保存されているデータが変更できないことです.単純なタイプのデータ(数値、文字列、ブール値)については、変数が指すメモリアドレスに値が保存されるため、定数に等しい.しかし、複合型のデータ(主にオブジェクトと配列)については、変数が指すメモリアドレスは、実際のデータを指すポインタだけが保存されており、constはこのポインタが固定されている(すなわち、常に別の固定されたアドレスを指している)ことを保証するしかなく、その指向するデータ構造が可変であるかどうかは、完全に制御できません.
ES 6宣言変数の6つの方法

var

function

let

const

import

class

4.最上位オブジェクトのプロパティ
ブラウザ環境ではwindowオブジェクト、ノードではglobalオブジェクトを指します.ES 5では,最上位オブジェクトの属性はグローバル変数と等価である.ES 6は、この点を変更するために、互換性を維持するためにvarコマンドとfunctionコマンドが宣言するグローバル変数が、依然として最上位オブジェクトの属性であることを規定している.一方,letコマンド,constコマンド,classコマンドが宣言するグローバル変数は,最上位オブジェクトの属性に属さないことを規定する.すなわち、ES 6からグローバル変数は、最上位オブジェクトの属性から徐々に外れます.

var a = 1;
//     Node   REPL   ，     global.a
//         ，   this.a
window.a // 1

let b = 1;
window.b // undefined

Globalオブジェクト

ブラウザでは、最上位オブジェクトはwindowですが、NodeとWeb Workerにはwindowはありません.

ブラウザとWeb Workerではselfも最上位オブジェクトを指しますが、Nodeにはselfはありません.

ノードでは、最上位オブジェクトはglobalですが、他の環境ではサポートされていません.

同じセグメントのコードは、さまざまな環境で最上位オブジェクトを取得できるようにするために、this変数が一般的に使用されていますが、限界があります.

グローバル環境では、thisは最上位オブジェクトを返します.ただし、NodeモジュールとES 6モジュールでは、thisは現在のモジュールを返します.

関数のthisは、関数がオブジェクトとしての方法ではなく、単純に関数として実行される場合、最上位オブジェクトを指します.ただし、厳格モードでは、thisはundefinedを返します.

厳格モードでも通常モードでもnew Function('turn this')()は、常にグローバルオブジェクトを返します.ただし、ブラウザがCSP(Content Security Policy、コンテンツセキュリティポリシー)を使用している場合、eval、new Functionのいずれの方法も使用できない可能性があります.

次は2つの無理に使える方法です.

//    
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof 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');
};

スペーサライブラリsystem.globalはこの提案をシミュレートし,すべての環境でglobalを入手できるようにした.

// CommonJS    
require('system.global/shim')();

// ES6      
import shim from 'system.global/shim'; shim();

上記のコードは、globalオブジェクトが存在することを保証します.

// CommonJS    
var global = require('system.global')();

// ES6      
import getGlobal from 'system.global';
const global = getGlobal();

上のコードは、最上位オブジェクトを変数globalに挿入します.