es5 スコープと es6 スコープの違いは何ですか

違い: es5 にはグローバル スコープと関数スコープの 2 種類のスコープしかありませんが、es6 にはグローバル スコープ、関数スコープ、ブロックレベル スコープの 3 種類のスコープがあり、さらに新しいスコープが追加されています。ブロックレベルのスコープ。ブロックレベルスコープの役割: 内部スコープ変数の昇格により外部変数が上書きされる問題を解決し、ループカウントに使用される変数がグローバル変数に漏洩するのを防ぎます。

このチュートリアルの動作環境: Windows7 システム、ECMAScript バージョン 6、Dell G3 コンピューター

es5 および es6 の範囲違い:

• es5 のスコープは 2 つだけです: グローバル スコープと関数スコープ

• es6 のスコープには 3 つのタイプがあります。グローバル スコープ、関数スコープ、ブロック レベル スコープ

Es5 では、グローバル スコープと関数スコープのみです

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

Es6

の新しいブロック レベル スコープは、単純に次のように理解できます: 中括弧 {} で囲まれたコンテンツには、独自のスコープを含めることができます。ブロックレベルのスコープの変数は 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 サイトの他の関連記事を参照してください。