es5和es6作用域的區別是什麼

區別：es5中的作用域只有全域性作用域和函數作用域兩種，而es6中的作用域有全域性作用域、函數作用域和塊級作用域三種，新增了一個塊級作用域。塊級作用域的作用：可以解決內層作用域變數提升導致外層變數被覆蓋、防止用於迴圈計數的變數洩露為全域性變數。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦

es5和es6在作用域上的區別：

• es5中的作用域只有兩種：全域性作用域和函數作用域

• es6中的作用域有三種：全域性作用域、函數作用域和塊級作用域

Es5中只有全域性作用域和函數作用域

ES5中用var宣告變數，var宣告的變數可能存在於全域性作用域中，也可能存在在區域性作用域中，具體情況如下

1. 全域性作用域

擁有全域性作用域的三種情況

a. 宣告在函數外部的變數擁有全域性作用域
b. 未定義直接賦值的變數自動宣告為全域性變數
c. window物件的屬性擁有全域性作用域

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只是被宣告而還沒有被賦值(在if語句中i才被賦值為6),因而第一個列印的i為undefined，第二個列印的i為6

var i = 5;
function fun(){
  console.log(i);//5
  if(true){
    let i = 6
    console.log(i);//6
  }
}
fun()

若使用let宣告if中的變數i，則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

如使用帶有塊級作用域的let來宣告i，則此處宣告的i變數只在for迴圈花括號{ }之中有效，在全域性作用域下存取塊級作用域中的變數會得到undefined

塊級作用域特點

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>

【相關推薦：、】

以上就是es5和es6作用域的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！