1. 程式人生 > >關於ES6的塊級作用域

關於ES6的塊級作用域

在ES5中是沒有塊級作用域的,只有全域性作用域與區域性作用域(函式作用域);

怎麼理解沒有塊級作用域呢?看接下來的例子:

for (var i = 0; i < 5; i++) {
        {
            console.log(i) //輸出0,1,2,3,4
        }
    }
console.log(i)  //輸出5 

用var宣告變數,變數i會被洩露為全域性變數,使得在任何地方i都能夠被讀取。
for (let i = 0; i < 5; i++) {
        {
            console.log(i) //輸出0,1,2,3,4
        }
    }
console.log(i)  //輸出Uncaught ReferenceError: i is not defined 

而用let宣告的變數,只在該作用域內有效,在外則無法讀取。

在編寫程式碼時很容易會遇到變數提升造成變數洩露成全域性變數,而且瀏覽器不會報錯,只是悄悄地把你某一個值改掉,使得糾錯時會比較麻煩,而ES6的塊級作用域很方便的解決了這個問題,看這段程式碼:

  function f() {
        var n = 1;
        if (true) {
            var n = 2;
function f() {
        let n = 1;
        if (true) {
            let n = 2;
            if (true) {
                let n = 3;
                console.log(n) //輸出1
            }
            console.log(n) //輸出2
        }
        console.log(n) //輸出3
    }

if (true) { var n = 3; console.log(n) //輸出3 } console.log(n) //輸出3 } console.log(n) //輸出3 }

變數被覆蓋了;

如果將var 改為let :


由於形成塊級作用域,只輸出各自作用域內宣告的n。

塊級作用域的出現很好的解決了變數覆蓋以及變數洩露的問題。

有關於let與const的塊級作用域的問題,可以去看阮一峰老師寫的書,非常詳細:http://es6.ruanyifeng.com/