Es 5とes 6の変数宣言と役割ドメインの異同

es 6が出てこない前に、jsの役割ドメインは2つの最上位の役割ドメインと関数の役割ドメインしかなかったが、es 6の出現はjsの変数の役割ドメインに新しい存在形式をもたらした:ブロックレベルの役割ドメイン.
ブロックレベルの役割ドメインを理解する前に、es 5の変数宣言と役割ドメインを復習しなければなりません.

変数宣言:

jsはvarキーワードを使用して変数を宣言することを知っています.varキーワードを使用して変数を宣言しないと、宣言された変数が最上位変数であることを示します(厳密な書き方ではありませんが、es 5の厳格なモードでは異常が放出されます).変数を直接宣言すると、Windowsの下に新しい変数がマウントされます.例:

a = 1;
window.a = 1;
//          。                。

'use strict'
a = 1; //Uncaught ReferenceError: a is not defined(…)

変数の移動:

jsでvarによって宣言されたすべての変数は、役割ドメインの上部に昇格して宣言され、宣言された場所で付与されます.やはりコードを直接見ましょう.

var a = 1;
function foo(){
    console.log(a);  //undefined;
    //             a  ，           a  ，                     。
    //               ，       ，            ，     console.log     3。
    var a = 3;
    console.log(a);  //3
}
foo();

varが関数変数を宣言する場合とfunctionを直接使用して関数を定義する場合とでは効果が異なることに注意してください.varは変数名の宣言を繰り上げるしかなく、functionを使用して関数を定義する場合、関数の初期化も繰り上げられるので、function宣言関数をいつ使用しても、宣言呼び出しがある限りエラーは発生しませんが、var形式の関数式を使用すると、値を与える前に呼び出すと関数が見つかりません.

fun(); //Uncaught TypeError: fun is not a function(…)
var fun = function () {
    alert(1);
}

-----------

fun(); //1
function fun() {
    alert(1);
}

もう1つは、同じ関数名の2つの関数を繰り返し使用し、宣言が有効になることです.

function fun() {
    return 1;
}

console.log(fun());  //2

function fun() {
    return 2;
}

Es 6変数を宣言する方法:

Es 6は、letとconstの2つの新しい宣言変数を導入した.

letがlet宣言を使用する変数はvar宣言の変数と類似しており、唯一の違いは、現在のブロックレベルの役割ドメインでのみ使用できることです.まず、ブロックレベルの役割ドメインとは何かを見てみましょう.ブロックレベルの役割ドメインとは、現在のコードブロックです.簡単に言えば、括弧の中の内容をブロックレベルの役割ドメインと言います.例えば、if文の内容、forループの内容です.

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

console.log(a); //1
console.log(b); //b is not defined(…)

もう1つの例を見てみましょう.

if(true){
    let a = 1;
}

console.log(a); //a is not defined(…)

ブロックレベルの役割ドメインを導入することは、以前forサイクルで定義された変数がグローバル汚染をもたらす問題を解決し、各コードブロックの変数が互いに独立しており、グローバル変数の汚染をもたらすことがないため、閉パケットを使用して必要な変数を保存する必要がないなど、多くの利点がある.

//es5：
for(var i=0;i<5;i++){

}
console.log(i); //5


//es6:
for(let i=0;i<5;i++){

}
console.log(i); //i is not defined(…)

//es5：
var arr = []
for(var i=0;i<5;i++){
    arr[i] = function(){
        alert(i);
    }
}
arr[3](); //5


//es6:
let arr = []
for(let i=0;i<5;i++){
    arr[i] = function(){
        alert(i);
    }
}
arr[3](); //3

constはconst宣言を使用する変数はlet宣言の変数と類似しており、ブロックレベルの役割ドメインでのみ使用できます.異なるのはconst宣言の変数は読み取り専用であり、宣言後は変更できません.

const PI = 3.1415;
PI = 3; // Assignment to constant variable.

letとconstには変数の昇格はありません:

前にvar宣言を見た変数はすべて昇格しますが、letとconst宣言を使用する変数にはこの特徴はありません.

{
    console.log(a); //a is not defined(…)
    let a = 1;

    -------

    console.log(b); //b is not defined(…)
    const b = 1;
}

変数を明示する前に、変数を呼び出すとエラーが発生します(ReferenceError).上記の例ではlet aの前にa変数を呼び出したが、この変数は使用できず、この変数が使用できない領域を「一時的デッドゾーン」(temporal dead zone、TDZと略称)と呼ぶ.このようにしても、変数を宣言する前にこの変数を使用することができず、es 5のようにコード実行のエラーを減らすことができ、使用してもエラーがどこにあるかを発見することは難しいというメリットがあります.

重複する変数宣言は許可されません:

{
    let a = 1;
    let a = 2; //Identifier 'a' has already been declared
}

同じブロックレベルの役割ドメイン内で同じ変数を繰り返し宣言すると、構文エラーが発生します.
Es 6はjsの変数に2つの新しい変数宣言方式(letとconst)を提供し、新しいブロックレベルの役割ドメインを提供する.これは以前のjsの柔軟性に一定の制限をもたらしたが,これはまったく何でもないし,柔軟性が多すぎると多くの混乱をもたらし,ブロックレベルの役割ドメインの導入は閉パケット方式で変数を保存する必要がなくなった.