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のうち、上位のオブジェクトの属性はグローバル変数と等価である.下のコードでは、トップレベルのオブジェクトの属性割り当てとグローバル変数の割り当ては同じです.
letおよびconstによって宣言された変数は、letおよびconst命令があるコードブロック内でのみ有効です.
letとconstはvarのように「変数アップ」現象が発生しません.したがって、変数は宣言後に必ず使用されます.そうでないとエラーが発生します.
ブロックレベルのスコープ内にletとconstコマンドが存在する限り、その宣言した変数は「バインディング」(binding)という領域になり、外部の影響を受けなくなる.ES 6は、ブロック内にletとconstコマンドが存在する場合、このブロックがこれらのコマンドに対して宣言する変数は、最初から閉鎖作用領域を形成することを明確に規定している.宣言する前にこれらの変数を使うと、エラーが発生します.コードブロック内では、letとconstコマンドを使用して変数を宣言する前に、この変数は使用できません.これは文法的には「一時的なデッドゾーン」と呼ばれています.
letは同じスコープ内で同じ変数を繰り返し宣言することができません.constは読み取り専用の定数を宣言します.一度声明したら定数の値は変更できません.下記のコードは定数を変更する値がエラーとなることを示しています.
const宣言の変数は値を変更してはいけません.これは、constが変数を宣言すると、すぐに初期化しなければならないことを意味しています.今後の割り当てには残してはいけません.以下のコードは、constにとっては、無価値を宣言するだけで、エラーが発生するということです.
具体的な参考: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といった方法は使えないかもしれません.以上のように、一つの方法を見つけるのは難しいです.すべての場合、最上階のオブジェクトを取ることができます.無理して使える二つの方法です.
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');
};