es5和es6作用域的區(qū)別有哪些

本文小編為大家詳細(xì)介紹“es5和es6作用域的區(qū)別有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“es5和es6作用域的區(qū)別有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

區(qū)別：es5中的作用域只有全局作用域和函數(shù)作用域兩種，而es6中的作用域有全局作用域、函數(shù)作用域和塊級作用域三種，新增了一個塊級作用域。塊級作用域的作用：可以解決內(nèi)層作用域變量提升導(dǎo)致外層變量被覆蓋、防止用于循環(huán)計數(shù)的變量泄露為全局變量。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦

es5和es6在作用域上的區(qū)別：

• es5中的作用域只有兩種：全局作用域和函數(shù)作用域

• es6中的作用域有三種：全局作用域、函數(shù)作用域和塊級作用域

Es5中只有全局作用域和函數(shù)作用域

ES5中用var聲明變量，var聲明的變量可能存在于全局作用域中，也可能存在在局部作用域中，具體情況如下

1. 全局作用域

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

a. 聲明在函數(shù)外部的變量擁有全局作用域
b. 未定義直接賦值的變量自動聲明為全局變量
c. window對象的屬性擁有全局作用域

2. 局部作用域（函數(shù)作用域）

函數(shù)體中變量的作用域

• 函數(shù)內(nèi)部定義的變量只有在函數(shù)內(nèi)才可訪問
  

例子

  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存在在函數(shù)作用域中，僅在函數(shù)fun中可訪問
  }
  fun()
  console.log(c);// undefined         全局作用域下訪問函數(shù)作用域中的變量c，得到undefined

Es6中新增塊級作用域

塊級作用域可以簡單理解為是:包在大括號{}里面的內(nèi)容, 它可以自成一個作用域。塊級作用域中變量由let和const聲明

為什么需要塊級作用域？

1. 解決內(nèi)層作用域變量提升導(dǎo)致外層變量被覆蓋

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

執(zhí)行結(jié)果

函數(shù)fun里面的變量i使用var申明，此處涉及了變量提升的問題，所謂變量提升，即函數(shù)聲明和變量聲明總是會被解釋器悄悄地"提升"到方法體的最頂部。所以此處的i相當(dāng)于提前到了函數(shù)fun的最頂部，但是賦值還是在運行的i = 6時進行，上面的代碼其實等價于:

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

當(dāng)?shù)谝粋€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語句所在的花括號{ }會形成一個塊級作用域，該作用域中所聲明的變量就“綁定”在該區(qū)域之中，不會再受外部影響（即暫時性死區(qū)），因而執(zhí)行fun函數(shù)時輸出的第一個i為全局作用域下的var i=5，if語句中輸出的i為塊級作用域中聲明的let i=6

2. 防止用于循環(huán)計數(shù)的變量泄露為全局變量

for(var i = 0; i < 3; i++){
  doSomething()
}
console.log(i)//3

上述代碼用var聲明了i變量用于循環(huán)，理想狀態(tài)下i應(yīng)該只在循環(huán)體內(nèi)有效，而此處的i卻被暴露而在全局作用域下，因而在循環(huán)結(jié)束后仍能在全局作用下訪問到i的值

for(let i = 0; i < 3; i++){
  console.log(i)
}
console.log(i)//undefined

如使用帶有塊級作用域的let來聲明i，則此處聲明的i變量只在for循環(huán)花括號{ }之中有效，在全局作用域下訪問塊級作用域中的變量會得到undefined

塊級作用域特點

1. let聲明的變量只在作用域（當(dāng)前花括號內(nèi)）中有效，因此允許任意嵌套，每一層都是單獨作用域

2. 內(nèi)層作用域可與外層作用域變量同名（不用作用域互不干擾）

3. let只能存在于當(dāng)前作用域的頂層

注意：if語句和for語句里面的{ }中，如果有由let或const聲明的變量/常量，該{ }所在范圍也屬于塊作用域

關(guān)于作用域的例子

<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定義的變量不能跨函數(shù)作用域訪問到

	if(true) {
		var c = 3;
	}
	console.log(c); // 3
	for(var i = 0; i < 4; i++) {
		var d = 5;
	};
	console.log(i);	// 4   (循環(huán)結(jié)束i已經(jīng)是4，所以此處i為4)
	console.log(d); // 5
	// if語句和for語句中用var定義的變量可以在外面訪問到，
	// 可見，if語句和for語句屬于塊作用域，不屬于函數(shù)作用域。

	{
		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作用域的區(qū)別有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。