ES6中區塊級作用域的詳細介紹（程式碼範例）

這篇文章帶給大家的內容是關於ES6中區塊級作用域的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

今天，來探討一下ES6中的區塊級作用域。

全域作用域和函數作用域

在ES5中，只全域作用域和函數作用域。這會導致函數作用域覆蓋了全域作用域；也或者迴圈中的變數洩漏為全域變數。

例如：

//  1.函数作用域覆盖了全局作用域,发生了变量提升，函数声明大于var声明的变量，因此函数里面的a提到了前面，在打印a，初始化一个undefined给a,所以打印出了undefined。
var a = '1';
function fn() {
    console.log(a);
    if (3<2) {
        var a  = 3;
    }
}
fn(); // undefined
// 2.循环中的变量泄露为全局变量
for(var i=0;i<5;i++) {
    console.log(i);
}
console.log(i); // 5;

ES6的區塊級作用域

#用let指令新增了區塊級作用域，外層作用域無法取得到內層作用域，非常安全明了。即使外層和內層都使用相同變數名，也都互不干擾。

// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名，也都互不干扰
{  
    {
        let food = 'apple';
        console.log(food); // apple
    }
    let food = 'orange';
    console.log(food); // orange
}

區塊級作用域和和函數宣告

在ES5中，函數只能在頂級作用域和函數作用域中聲明，不能在區塊層級作用域中聲明。但是在ES6中，函數可以在區塊級作用域中聲明。

但會有一定的問題，因為函數宣告會被提到程式碼的最前面。所以會報錯，最好在ES6中用函數表達式來表示一個函數。

例如：

//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log(&#39;我在函数里面！&#39;);
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = &#39;111&#39;;
    let fn = function () {
        console.log(&#39;我在函数里面！&#39;);
    }
    console.log(fa,fn); // 111 ƒ () { console.log(&#39;我在函数里面！&#39;);}
}

注意：ES6中允許函數在區塊層級作用域中可以宣告的條件是必須在大括號裡面，否則就會報錯。

// 1.报错的情况
if (4>2) {
    let fn = function () {};
}

//2.报错的情况
if (4>2)
    let fn = function () {}; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

以上是ES6中區塊級作用域的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！