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>

【相關推薦：javascript影片教學、web前端】

以上是es5和es6作用域的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！