ホームページ > 記事 > ウェブフロントエンド > es5 スコープと es6 スコープの違いは何ですか
違い: es5 にはグローバル スコープと関数スコープの 2 種類のスコープしかありませんが、es6 にはグローバル スコープ、関数スコープ、ブロックレベル スコープの 3 種類のスコープがあり、さらに新しいスコープが追加されています。ブロックレベルのスコープ。ブロックレベルスコープの役割: 内部スコープ変数の昇格により外部変数が上書きされる問題を解決し、ループカウントに使用される変数がグローバル変数に漏洩するのを防ぎます。
このチュートリアルの動作環境: Windows7 システム、ECMAScript バージョン 6、Dell G3 コンピューター
es5 および es6 の範囲違い:
es5 のスコープは 2 つだけです: グローバル スコープと関数スコープ
es6 のスコープには 3 つのタイプがあります。グローバル スコープ、関数スコープ、ブロック レベル スコープ
ES5 var を使用して宣言しますvar で宣言された変数は、グローバル スコープまたはローカル スコープに存在する可能性があります。具体的な状況は次のとおりです。
1. グローバル スコープ
グローバル スコープを持つ 3 つの状況
a. 関数の外で宣言された変数はグローバル スコープを持つ
b. 直接代入が行われた未定義の変数は自動的にグローバル変数として宣言されます
c. プロパティウィンドウ オブジェクトのグローバル スコープは
#2 ローカル スコープ (関数スコープ)
関数本体内の変数のスコープ
関数内で定義された変数は、関数内でのみアクセスできます
例
var a = 1; console.log(a);// 1 此处a为全局变量,在全局作用域下都可访问得到 b = 2 console.log(b); // 2 此处b未被var定义,而是被直接赋值,自动声明为全局变量 function fun() { var c = 3; console.log(c);//3 此处c存在在函数作用域中,仅在函数fun中可访问 } fun() console.log(c);// undefined 全局作用域下访问函数作用域中的变量c,得到undefined
の新しいブロック レベル スコープは、単純に次のように理解できます: 中括弧 {} で囲まれたコンテンツには、独自のスコープを含めることができます。ブロックレベルのスコープの変数は let と const によって宣言されます
なぜブロックレベルのスコープが必要なのでしょうか?
1. 内部スコープ変数の昇格により外部変数が上書きされる問題を解決します
var i = 5; function fun(){ console.log(i);//undefined if(true){ var i = 6 console.log(i);//6 } } fun()
実行結果
関数 fun の変数 i は、var を使用して宣言されています。これには、変数の昇格の問題が含まれます。いわゆる変数の昇格とは、関数の宣言と変数の宣言が常に、メソッド本体の先頭に静かに「昇格」されることを意味します。通訳者。したがって、ここでの i は関数 fun の先頭に事前に到達することと同等ですが、割り当ては i = 6 の実行中にも実行されます。上記のコードは実際には次と同等です:
var i = 5; function fun(){ var i; console.log(i); if(true){ i = 6 console.log(i) } } fun()
最初の i が出力されるとき、i は宣言されているだけで割り当てられていません (i には if ステートメントで値 6 が割り当てられています)。そのため、最初に出力された i は未定義で、2 番目に出力された i は 6
var i = 5; function fun(){ console.log(i);//5 if(true){ let i = 6 console.log(i);//6 } } fun()
を使用した場合、変数を宣言します。 i in if の場合、if ステートメントが配置されている中括弧 { } はブロックレベルのスコープを形成し、このスコープで宣言された変数はこの領域で「バインド」され、外部の影響を受けなくなります。つまり、一時的なデッド ゾーン)、そのため、fun 関数を実行するときの最初の i 出力は、グローバル スコープでは var i=5 であり、if ステートメントの i 出力は、ブロック レベル スコープで宣言された let i=6## です。
2. ループのカウントに使用される変数がグローバル変数に漏れないようにする
for(var i = 0; i < 3; i++){ doSomething() } console.log(i)//3上記のコードは、ループの var を使用して i 変数を宣言します。理想的には、i はループ内でのみ使用する必要があります。これは本文では有効ですが、ここでの i はグローバル スコープで公開されているため、ループが終了した後も、グローバル スコープで i の値にアクセスできます
for(let i = 0; i < 3; i++){ console.log(i) } console.log(i)//undefinedブロックレベル スコープを使用する場合i を宣言すると、ここで宣言された i 変数は、for ループの中かっこ { } 内でのみ有効です。グローバル スコープのブロック レベル スコープの変数にアクセスすると、未定義
が発生します。 #ブロックレベルのスコープ機能
1. let で宣言された変数はスコープ内 (現在の中括弧内) でのみ有効であるため、各レベルで任意のネストが許可されます。これらはすべて別個のスコープです。2. 内側のスコープは外側のスコープの変数と同じ名前を持つことができます (相互に干渉せずに使用されるスコープはありません)
3. let は次の場所にのみ存在できます。現在のスコープ トップレベル
注: if ステートメントおよび for ステートメントの { } に let または const によって宣言された変数/定数がある場合、{ } のスコープもブロック スコープに属します
スコープに関する例
<script type="text/javascript"> { var a = 1; console.log(a); // 1 } console.log(a); // 1 // 可见,通过var定义的变量可以跨块作用域访问到。 (function A() { var b = 2; console.log(b); // 2 })(); // console.log(b); // 报错, // 可见,通过var定义的变量不能跨函数作用域访问到 if(true) { var c = 3; } console.log(c); // 3 for(var i = 0; i < 4; i++) { var d = 5; }; console.log(i); // 4 (循环结束i已经是4,所以此处i为4) console.log(d); // 5 // if语句和for语句中用var定义的变量可以在外面访问到, // 可见,if语句和for语句属于块作用域,不属于函数作用域。 { var a = 1; let b = 2; const c = 3; { console.log(a); // 1 子作用域可以访问到父作用域的变量 console.log(b); // 2 子作用域可以访问到父作用域的变量 console.log(c); // 3 子作用域可以访问到父作用域的变量 var aa = 11; let bb = 22; const cc = 33; } console.log(aa); // 11 // 可以跨块访问到子 块作用域 的变量 // console.log(bb); // 报错 bb is not defined // console.log(cc); // 报错 cc is not defined } </script>
[関連する推奨事項:
JavaScript ビデオ チュートリアル、Web フロントエンド ]
以上がes5 スコープと es6 スコープの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。