區別：es5中的作用域只有全域作用域和函數作用域兩種，而es6中的作用域有全域作用域、函數作用域和區塊級作用域三種，新增了一個塊級作用域。區塊級作用域的作用：可以解決內層作用域變數提升導致外層變數被覆蓋、防止用於循環計數的變數洩漏為全域變數。
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦
es5和es6在作用域上的差異：
es5中的作用域只有兩種：全域作用域和函數作用域
es6中的作用域有三種：全域作用域、函數作用域和區塊級作用域
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#區塊級作用域可以簡單理解為是:包在大括號{}裡面的內容, 它可以自成一個作用域。區塊級作用域中變數由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中文網其他相關文章！
