ES 6文法まとめ——letとconst

15435 ワード

ECMAScript 6概要
ECMAScript 6.0(以下、ES 6という)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.JavaScript言語は複雑な大規模なアプリケーションを作成し、企業レベルの開発言語になることを目標としています.
特性1:最上階のオブジェクトの属性の違い
var宣言の変数はwindowにマウントされますが、letとconst宣言の変数はトップレベルのオブジェクトではなく、ブラウザ環境ではwindowオブジェクトを指します.Nodeではglobalオブジェクトを指します.ES 5のうち、上位のオブジェクトの属性はグローバル変数と等価である.下のコードでは、トップレベルのオブジェクトの属性割り当てとグローバル変数の割り当ては同じです.
var a = 1;
console.log(a,window.a);    // 1 1

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 100;
console.log(c,window.c);    // 1 undefined
特性2:ブロックレベルのスコープ
letおよびconstによって宣言された変数は、letおよびconst命令があるコードブロック内でのみ有効です.
if (true) {
  var a = 10
  let b = 100;
}

console.log(a); // 10
console.log(b); //   ReferenceError
if (true) {
  var a = 10
  const PI = 3.1415;
}

console.log(a); // 10
console.log(PI ); //   ReferenceError
特性3:変数の昇格は存在しません.
letとconstはvarのように「変数アップ」現象が発生しません.したがって、変数は宣言後に必ず使用されます.そうでないとエラーが発生します.
console.log(a); //   undefined
console.log(b); //   ReferenceError

var a= 10;
let b= 100;
console.log(a); //   undefined
console.log(PI); //   ReferenceError

var a= 10;
const PI = 3.1415;
特性4:一時死区
ブロックレベルのスコープ内にletとconstコマンドが存在する限り、その宣言した変数は「バインディング」(binding)という領域になり、外部の影響を受けなくなる.ES 6は、ブロック内にletとconstコマンドが存在する場合、このブロックがこれらのコマンドに対して宣言する変数は、最初から閉鎖作用領域を形成することを明確に規定している.宣言する前にこれらの変数を使うと、エラーが発生します.コードブロック内では、letとconstコマンドを使用して変数を宣言する前に、この変数は使用できません.これは文法的には「一時的なデッドゾーン」と呼ばれています.
var a = 100;
if (true) {
  // TDZ  
  a= 'abc'; // ReferenceError
  console.log(a); // ReferenceError
  let a = 123; // TDZ  
  console.log(a); // 123
}
var a = 100;
if (true) {
  // TDZ  
  a= 'abc'; // ReferenceError
  console.log(a); // ReferenceError
  const a = 123; // TDZ  
  console.log(a); // 123
}
特性5:繰り返し宣言は禁止されています.
letは同じスコープ内で同じ変数を繰り返し宣言することができません.constは読み取り専用の定数を宣言します.一度声明したら定数の値は変更できません.下記のコードは定数を変更する値がエラーとなることを示しています.
//   
function () {
  let a = 10;
  var a = 1;
}
//   
function () {
  let a = 10;
  let a = 1;
}
const PI = 3.1415;
console.log(PI);// 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
特性6:const変数を宣言すると、すぐに初期化しなければなりません.
const宣言の変数は値を変更してはいけません.これは、constが変数を宣言すると、すぐに初期化しなければならないことを意味しています.今後の割り当てには残してはいけません.以下のコードは、constにとっては、無価値を宣言するだけで、エラーが発生するということです.
const foo;// SyntaxError: Missing initializer in const declaration
追加:global対象
具体的な参考:https://www.cnblogs.com/jjq-exchange/p/10105411.html
ES 5のトップレベルのオブジェクト自体も問題です.様々な実装では統一されていません.ブラウザーの中で、トップの対象はwindowですが、NodeとWeb Workerはwindowがありません.ブラウザやWebワーカーの中でも、selfは最上位のオブジェクトを指していますが、Nodeにselfはありません.Nodeの中で、最上階のオブジェクトはglobalですが、他の環境はサポートしていません.同じセグメントのコードは、様々な環境で上位のオブジェクトにアクセスできるようにするために、現在は一般的にthis変数を使用していますが、限界があります.
グローバル環境では、thisは最上位のオブジェクトに戻ります.しかし、NodeモジュールとES 6モジュールのうち、thisは現在のモジュールを返します.関数の中のthisは、関数が対象となる方法ではなく、単に関数として動作します.thisは最上階のオブジェクトを指します.ただし、厳しいモードでは、thisはundefinedに戻ります.厳格なモードであれ、通常のモードであれ、new Function(‘return this’)()は、常にグローバルオブジェクトに戻ります.ただし、ブラウザがCSP(Conttent Security Policy、コンテンツセキュリティポリシー)を使っていると、eval、new Functionといった方法は使えないかもしれません.以上のように、一つの方法を見つけるのは難しいです.すべての場合、最上階のオブジェクトを取ることができます.無理して使える二つの方法です.
//    
(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');
};